Question

我一直试图找到执行以下操作的JQuery脚本：在我点击 apply-class-here 这里div后，切换启用/禁用类。一旦您在div外部单击或单击其他应用类div之一，它也应该禁用该类。

我已经找到了一个完全相同的脚本，但是当div包含在其他几个元素中时，我似乎无法使它工作。（tile-wrapper＆gt; tile＆gt; apply-class-here ）

<div class="tile-wrapper">
    <div class="tile">
        <div class="apply-class-here">Block</div>
    </div>
</div>
<div class="tile-wrapper">
    <div class="tile">
        <div class="apply-class-here">Block</div>
    </div>
</div>
<div class="tile-wrapper">
    <div class="tile">
        <div class="apply-class-here">Block</div>
    </div>
</div>
<div class="tile-wrapper">
    <div class="tile">
        <div class="apply-class-here">Block</div>
    </div>
</div>

这是我找到的脚本，它似乎只适用于不包含在div等任何其他元素中的元素。

jQuery(document).ready(function($){ 
    $(function () {
            $('.apply-class-here').click(function(evt) {
            evt.stopPropagation();
            $(this).siblings().removeClass('overlay-active');
            $(this).toggleClass('overlay-active');
        });

        $(document).click(function() {
            $('.apply-class-here').removeClass('overlay-active');
        });
    });
});

如果有人能帮我解决这个问题，我真的很感激。我似乎无法按照我希望的方式工作。

Answer 1

您正在尝试在没有任何内容时选择兄弟元素：

$(this).siblings().removeClass('overlay-active');

将您的代码更改为（并删除嵌套的文档就绪调用）：

$('.apply-class-here').click(function (evt) {
    evt.stopPropagation(); 
    $(this).closest('.tile-wrapper').siblings().not($(this)).each(function(){
        $(this).find('.apply-class-here').removeClass('overlay-active');
    })
    $(this).toggleClass('overlay-active');
});
$(document).click(function () {
    $('.apply-class-here').removeClass('overlay-active');
});

<强> jsFiddle example

Answer 2

问题是$(this).siblings().removeClass('overlay-active');，因为apply-class-here不是兄弟姐妹

jQuery(function ($) {
    $('.apply-class-here').click(function (evt) {
        evt.stopPropagation();
        $('.overlay-active').not(this).removeClass('overlay-active');
        $(this).toggleClass('overlay-active');
    });

    $(document).click(function () {
        $('.apply-class-here').removeClass('overlay-active');
    });
});

演示：Fiddle

单击其他div或div外部时单击并禁用JQuery toggleclass

2 个答案: