Question

使用Isotope时遇到了一些麻烦。我正在为自己创建一个视频组合。事实上，我做相机工作，照明，编辑和评分。我希望能够使用独占组合中的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/isotope-layout@3/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();
  });
});

Answer 1

您的复选框值需要有“。”在价值之前，即<input id="checkbox-edit" class="checkbox-custom" type="checkbox" value=".edit" />。（见下文）此外，您的无序列表html是向后的，在<ul>之间有一堆<li>。它应该是：

<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或link可以帮助您更好地查看事物。

使用同位素过滤投资组合

1 个答案: