查找.closest（）.next（）然後toggleClass

我試圖顯示頁面上的許多不同類別的東西，供用戶選擇倍數。當點擊一個類別時，複選框被選中。點擊我也試圖添加一個類的覆蓋面具，但它沒有找到它。我試圖找到最接近的，下次上課.mask查找.closest（）.next（）然後toggleClass

HTML：

<label class="selector"> 
    <input name="category[]" value="53" type="checkbox"> 
    <div class="thumbnail choose">       
     <div class="chooseWrap">         
      <img src="/images/registration/cats/53.jpg" alt="Art &amp; Design"> 
      <div class="mask"><i class="fa fa-check fa-2x"></i><br>Art &amp; Design</div> 
     </div> 
     <div class="caption">Art &amp; Design</div> 
    </div>      
</label> 
    <label class="selector"> 
    <input name="category[]" value="54" type="checkbox"> 
    <div class="thumbnail choose">       
     <div class="chooseWrap">         
      <img src="/images/registration/cats/53.jpg" alt="People"> 
      <div class="mask"><i class="fa fa-check fa-2x"></i><br>People</div> 
     </div> 
     <div class="caption">People</div> 
    </div>      
</label>

JQuery的

$('.Choose').click(function(){ 
    $(this).closest('.mask').next().toggleClass('active'); 
});

來源

2014-01-21 Darren Sweeney

'.closest（）'選擇最接近的父元素。你應該使用'.find（）'方法，而且選擇器應該是'.choose'而不是'.Choose'和'.mask'元素沒有_next_ siblings，所以'.next（）'方法不會不返回任何元素，這意味着整個邏輯_不幸的是錯誤的。 – undefined

可能的錯字'class =「選擇」'vs大寫'.Choose'？ –

其實，你想用'next（）'做什麼？ '.mask'沒有任何元素'next'給他。 –

雖然看着你markup，你必須使用.find()根據自己的需要。 .closest()將通過沿着DOM樹行進來搜索元素。

嘗試，

$('.choose').click(function(){ 
    $(this).find('.mask').toggleClass('active'); 
});

來源

2014-01-21 08:36:09

太棒了！完美作品 –

@DarrenSweeney很高興幫助。 –

查找.closest（）.next（）然後toggleClass

回答

相關問題