Javascript 用同位素筛选投资组合_Javascript_Html_Css_Jquery Isotope

Javascript 用同位素筛选投资组合

javascript html css

Javascript 用同位素筛选投资组合,javascript,html,css,jquery-isotope,Javascript,Html,Css,Jquery Isotope,我在使用同位素时遇到了一些麻烦。我正在为自己制作一个视频作品集。事实上，我做相机工作，照明，编辑和分级。我想能够在一个排他性的组合中用4个复选框对它们进行排序。但是，如果我检查相机和分级的例子，它不会返回任何结果。我认为这是我的“数据类别”和我在JS脚本中的返回的问题感谢您的阅读和帮助 index.html <body> <div id="menu"> <img src="images/logo_mxm.png"/>

我在使用同位素时遇到了一些麻烦。我正在为自己制作一个视频作品集。事实上，我做相机工作，照明，编辑和分级。我想能够在一个排他性的组合中用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>

您的复选框值需要在值之前有一个“.”，即

。（见下文）此外，无序列表html是向后的，一个之间有一堆

。应该是：
<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> 



摄像机


轻的


编辑


分级



JSFIDLE或链接将有助于以更好的方式查看事物
 您的复选框值需要在值之前有一个“.”，即。（见下文）
此外，无序列表html是向后的，一个之间有一堆。应该是：
<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> 



摄像机


轻的


编辑


分级



JSFIDLE或链接将有助于以更好的方式查看事物