创建 var 并将其插入 jQuery 子选择器 ("parent > child")

Question

我一直在尝试创建一个变量，然后使用 jQuery 即 $("parent > child") 将其插入到子选择器中，但没有成功。

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

我遇到的问题是稍后在代码中，我试图正确调出关联的选中导航按钮的数据过滤器（使用 var = sclass）并将其应用为通过 Child Selector $("parent > child") 的选择器，但一直无法让它工作。

最后两行代码有问题：

$('.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

你有没有检查过你的班级？ Console.log 是你的朋友 ;)

由于 .children 仅向下移动 1 级，因此它只会检查 UL。它永远不会到达按钮。

尝试：

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

或：

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

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

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

或者这个（注意space！）：

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

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

创建 var 并将其插入 jQuery 子选择器 ("parent > child")

Creating and inserting var into jQuery Child Selector ("parent > child")

javascript

variables

jquery

parent-child

selector