創建var並插入到jQuery子選擇器（「parent> child」）

Question

我一直在嘗試創建一個變量，然後使用jQuery將其插入到Child Selector中，即$（「parent> child」），但沒有運氣。

我已經包含了整個可用的jQuery代碼片段作爲參考，總體思路是當點擊一個導航按鈕時，類「.is-checked」被添加到導航按鈕「.nav-collapse」。每個按鈕都與通過jQuery Isotope應用的唯一數據過濾器相關聯。

我遇到的問題是後來在代碼中，我然後試圖正確調用相關的選中的導航按鈕的數據過濾器（使用var = sclass）並將其作爲選擇器通過Child Selector $（「父母>孩子」），但一直在麻煩得到這個工作。

問題是與最後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") 

...

然而，如果我選擇「父」更改爲現有的選擇器裏類=「裏的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是你的朋友;）

由於.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'); 

或者這：

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

對於您的最後一行代碼，刪除點後面的點，或從數據過濾器中刪除點。