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

时间:2016-03-05 05:05:21

标签: javascript jquery variables parent-child selector

我一直在尝试创建一个变量,然后使用jQuery将其插入子选择器,即$(“parent> child”),没有运气。

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

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

问题是最后两行代码:

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

1 个答案:

答案 0 :(得分:0)

你甚至检查过你的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后面的点,或者从数据过滤器中删除点。