Question

我试图在页面上显示许多不同类别的内容，供用户选择倍数。单击某个类别时，将选中一个复选框。点击后我也试图在覆盖面具上添加一个类，但它找不到它。我正在尝试找到最接近的下一课.mask

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');
});

Answer 1

在查看markup时，您必须根据需要使用.find()。 .closest()将通过DOM树向上移动来搜索元素。

尝试，

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

找到.closest（）。next（）然后找到toggleClass

1 个答案: