我一直在尝试创建一个变量,然后使用 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 后面的点,或从数据筛选器中删除点。