Question

我一直在尝试创建一个变量，然后使用jQuery将其插入子选择器，即$（“parent＆gt; child”），没有运气。

我已将整个适用的jQuery代码段作为参考，总体思路是当单击导航按钮时，“。is-checked”类将添加到导航按钮“.nav-collapse”。每个按钮都与一个通过jQuery Isotope应用的唯一数据过滤器相关联。

我遇到的问题是，稍后在代码中，我正在尝试正确调出相关的已检查导航按钮的数据过滤器（使用var = sclass）并通过子选择器将其应用为选择器$ （“父母＆gt;孩子”），但一直无法让这个工作。

问题是最后两行代码：

$('.nav-collapse').on( 'click', 'button', function( event ) {
    var $target = $( event.currentTarget );
    $target.toggleClass('is-checked');
    var isChecked = $target.hasClass('is-checked');
    var filter = $target.attr('data-filter');
        if ( isChecked ) {
            addFilter( filter );

        } else {
            removeFilter( filter );
        }

        $grid.isotope({ filter: filters.join(',') });


        $(".masonry-image a").click(function(){

            var sclass = $('.nav-collapse.is-checked').children().attr('data-filter');

            $(" li." + sclass + " > a[href$='-hi.jpg']").addClass("fancybox-button")

...

但是，如果我将选择器“parent”更改为现有的选择器li class =“li class1”，例如：

$(" li.class1 > a[href$='-hi.jpg']")

然后我要去的功能有效，所以我知道我在正确的轨道上。我无法找到任何创建变量然后将其插入选择器中的父项的示例，因此我不确定我的问题是否在于我如何设置选择器，或者我如何构造变量，或者都。

        <nav class="nav-collapse">
            <ul>
                <li><button class="button" data-filter=".class1">Class 1</button></li>
                <li><button class="button" data-filter=".class2">Class 2</button></li>
                <li><button class="button" data-filter=".class3">Class 3</button></li>
            </ul>
        </nav>

        <li class="masonry-image class1">
        <a href="images/shared/00001-hi.jpg">
        <img src="images/shared/00001.jpg" width="308" height="205" alt=""/>
        </a>
        </li>

        <li class="masonry-image class2">
        <a href="images/shared/00002-hi.jpg">
        <img src="images/shared/00002.jpg" width="308" height="205" alt=""/>
        </a>
        </li>

Answer 1

你甚至检查过你的sclass吗？ Console.log是你的朋友;）

由于。儿童只能降低1级，所以只会检查UL。它永远不会到达按钮。

尝试：

var sclass = $('.nav-collapse.is-checked').find("button").attr('data-filter');

或者：

var sclass = $('.nav-collapse.is-checked button').attr('data-filter');

编辑：oops我误解了你的代码，我认为你需要：

var sclass = $('.nav-collapse').find('.is-checked').attr('data-filter');

或者这个（注意空格！）：

var sclass = $('.nav-collapse .is-checked').attr('data-filter');

对于最后一行代码，请删除li后面的点，或者从数据过滤器中删除点。

创建var并将其插入jQuery子选择器（“parent＆gt; child”）

1 个答案: