使用同位素過濾投資組合

使用同位素我遇到了一些麻煩。我正在爲自己創建一個視頻組合。事實上，我做攝像頭的工作，照明，編輯和分級。我希望能夠以獨特的組合方式將它們與4個複選框進行排序。但是，如果我檢查相機和評分爲例，它不會返回任何內容。我認爲這是我的「數據類別」和我的JS腳本中的問題。使用同位素過濾投資組合

感謝您的閱讀和幫助！

的index.html

<body> 
    <div id="menu"> 
     <img src="images/logo_mxm.png"/> 
     <li> 
      <ul> 
       <input id="checkbox-camera" class="checkbox-custom" type="checkbox" value="camera" /> 
       <label for="checkbox-camera" class="checkbox-custom-label">CAMERA</label> 
      </ul> 

      <ul> 
       <input id="checkbox-light" class="checkbox-custom" type="checkbox" value="light" /> 
       <label for="checkbox-light" class="checkbox-custom-label">LIGHT</label> 
      </ul> 

      <ul> 
       <input id="checkbox-edit" class="checkbox-custom" type="checkbox" value="edit" /> 
       <label for="checkbox-edit" class="checkbox-custom-label">EDIT</label> 
      </ul> 

      <ul> 
       <input id="checkbox-grading" class="checkbox-custom" type="checkbox" value="grading" /> 
       <label for="checkbox-grading" class="checkbox-custom-label">GRADING</label> 
      </ul> 
     </li>  
    </div> 

     <div id="container"> 
      <div class="item" data-category="camera light grading all"> 
       <iframe width="100%" height="100%" src="https://www.youtube.com/embed/OsuD2Ec7zjE" frameborder="0" allowfullscreen></iframe> 
       <p>Suedama | Au-dessus</p> 
       <div class="rond" id="rond_camera"></div> 
       <div class="rond" id="rond_light"></div> 
       <div class="rond" id="rond_grading"></div> 
      </div> 

      <div class="item" data-category="camera light edit grading all"> 
       <iframe src="https://player.vimeo.com/video/201592536?color=263e69&title=0&byline=0&portrait=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
       <p>Je suis l&#039;ultime combat</p> 
       <div class="rond" id="rond_camera"></div> 
       <div class="rond" id="rond_light"></div> 
       <div class="rond" id="rond_edit"></div> 
       <div class="rond" id="rond_grading"></div> 
      </div> 

      <div class="item" data-category="light all"> 
       <iframe width="100%" height="100%" src="https://www.youtube.com/embed/ypL1MCq9aJQ" frameborder="0" allowfullscreen></iframe> 
       <p>Enovos | Professeur House</p> 
       <div class="rond" id="rond_light"></div> 
      </div> 

      <div class="item" data-category="light all"> 
       <iframe width="100%" height="100%" src="https://www.youtube.com/embed/5QDSi4VuEJE" frameborder="0" allowfullscreen></iframe> 
       <p>Bernard Massard signature | 4 Artistes</p> 
       <div class="rond" id="rond_light"></div> 
      </div> 

      <div class="item" data-category="camera light edit grading all"> 
       <iframe src="https://player.vimeo.com/video/168194761?color=e3cc39&title=0&byline=0&portrait=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
       <p>Tom à la ferme #2</p> 
       <div class="rond" id="rond_camera"></div> 
       <div class="rond" id="rond_light"></div> 
       <div class="rond" id="rond_edit"></div> 
       <div class="rond" id="rond_grading"></div> 
      </div> 

      <div class="item" data-category="camera light edit grading all"> 
       <iframe src="https://player.vimeo.com/video/129125561?color=e3cc39&title=0&byline=0&portrait=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
       <p>Tom à la ferme #1</p> 
       <div class="rond" id="rond_camera"></div> 
       <div class="rond" id="rond_light"></div> 
       <div class="rond" id="rond_edit"></div> 
       <div class="rond" id="rond_grading"></div> 
      </div> 

     </div> 

    <!--Javascript--> 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> 
    <script src='http://npmcdn.com/[email protected]/dist/isotope.pkgd.js'></script> 

    <script src="js/index.js"></script> 


</body>

index.js

// set up variables 
var categoryFilters = []; 
var categoryFilter; 

// init Isotope 
var $container = $('#container').isotope({ 
    itemSelector: '.item', 
    filter: function() { 
    var $this = $(this); 
    categoryFilter = categoryFilters.length ? categoryFilters.join(' ') : 'all'; 
    console.log(categoryFilter); 
    var categoryResult = categoryFilter ? $this.is('[data-category*=' + categoryFilter + ']') : true; 
    return categoryResult; 
    } 
}); 

// filter with checkboxes 
var $checkboxes = $('#menu input'); 

$checkboxes.change(function() { 
    categoryFilters.length = 0; 
    $checkboxes.each(function(i, elem) { 
    if (elem.checked) { 
     categoryFilters.push(elem.value); 
     console.log('check'); 
    } 
    $container.isotope(); 
    }); 
});

來源

2017-04-16 Maxime Congi

你的複選框值需要有一個「」之前的值，即<input id="checkbox-edit" class="checkbox-custom" type="checkbox" value=".edit" />。（見下）另外，你的無序列表html是倒退的，在一個<li>之間有一堆<ul>。它應該是：

<ul> 
     <li> 
      <input id="checkbox-camera" class="checkbox-custom" type="checkbox" value=".camera" /> 
      <label for="checkbox-camera" class="checkbox-custom-label">CAMERA</label> 
     </li> 

     <li> 
      <input id="checkbox-light" class="checkbox-custom" type="checkbox" value=".light" /> 
      <label for="checkbox-light" class="checkbox-custom-label">LIGHT</label> 
     </li> 

     <li> 
      <input id="checkbox-edit" class="checkbox-custom" type="checkbox" value=".edit" /> 
      <label for="checkbox-edit" class="checkbox-custom-label">EDIT</label> 
     </li> 

     <li> 
      <input id="checkbox-grading" class="checkbox-custom" type="checkbox" value=".grading" /> 
      <label for="checkbox-grading" class="checkbox-custom-label">GRADING</label> 
     </li> 
    </ul>

jsfiddle或鏈接將幫助以更好的方式查看事情。

來源

2017-04-16 19:41:39 Macsupport

使用同位素過濾投資組合

回答

相關問題