创建 var 并将其插入 jQuery Child Selector(“父>子”）

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

本文关键字：Selector var 插入 Child jQuery 创建      更新时间：2023-09-26

我一直在尝试创建一个变量，然后使用 jQuery 将其插入子选择器，即 $（"父>子"），但没有运气。

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

我

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

问题出在最后 2 行代码上：

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

。

但是，如果我将选择器"父"更改为现有的选择器 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>

你甚至检查过你的班级吗？控制台.log是你的朋友;)

由于 .child 只能下降 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');

或者这个（注意空格！

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

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

相关文章：