jQuery函数防止在点击时添加/删除类

Question

我正在尝试让一个

在被点击时获得新的class（使其展开），在该

内部单击取消链接时将其还原为旧的class（关闭）。

<div class="new-discussion small">
    <a class="cancel">Cancel</a>
</div>

<script>
    $('.new-discussion.small').click(function() {
        $(this).addClass("expand").removeClass("small");
    });
    $('a.cancel').click(function() {
        $('.new-discussion.expand').addClass("small").removeClass("expand");
    });
</script>

现在，添加“expand”类别的功能完美运行，但是当我点击取消链接后关闭面板，只有在删除此代码后才能正常工作：

$('.new-discussion.small').click(function() {
    $(this).addClass("expand").removeClass("small");
});

所以我猜这一定是阻止第二个函数工作的原因，但我真的想不出为什么。

有什么想法吗？ 谢谢！

- Lennart

---

дҪ зҹҘйҒ“еҸҜд»ҘдҪҝз”Ё.toggleClassжқҘд»Јжӣҝж·»еҠ е’ҢеҲ йҷӨеҗ—пјҹ - VoidKing

是的，但它也不起作用。 - Lennart

猜测：由于'a.cancel'位于'.new-discussion.small'内部，即使您点击a.cancel，它是否仍会注册$('.new-discussion.small').click？ - VoidKing

在我的上面的评论中，我可能是错的，但是认为检查一下可能会有所帮助，因为你说当你删除 $('.new-discussion.small').click(function() { $(this).addClass("expand").removeClass("small"); });时它可以工作。 - VoidKing

是的，我考虑过这个问题。然而，当点击取消时，面板已经打开，因此“small”类已经被移除 - 因此，该事件不应该被注册。或者它会吗？这将是一个合乎逻辑的解释。 - Lennart

Answer 1

试试这个

$('a.cancel').click(function() {
    $('.new-discussion.expand').addClass("small").removeClass("expand");
    return false;
});

可能的原因是您的点击事件被传播到了父元素，而父元素也在监听点击事件。

- Sachin Jain

---

这个回答和 plalxs 的评论让我想到了这篇相关的文章：https://dev59.com/RXM_5IYBdhLWcg3wfTO7 - user2264587

请注意，return false与调用e.preventDefault()和e.stopPropagation()是相同的，但仅在jQuery处理程序的上下文中停止事件冒泡。 - plalx

@user2264587 谢谢！这个链接是我最喜欢的之一；）在这种情况下，我认为由于它是一个锚标签，并且可能与href属性关联，所以最好返回false。无论如何，这取决于您。e.stopPropagation() 在这里也可以起作用。 - Sachin Jain

Answer 2

自从你的 a 元素位于 .new-discussion 元素内部，当你点击 a 时，它也会触发父元素上的 click 事件，因为事件正在向上冒泡。

要解决这个问题，你可以通过调用 e.stopPropagation(); 来阻止事件传播。这将防止执行任何 父级 处理程序。

$('a.cancel').click(function(e) {
    e.stopPropagation();
    $('.new-discussion.expand').addClass("small").removeClass("expand");
});

- plalx

Answer 3

由于链接在 <div> 内部，它同时使用了两种点击方法。在继续之前，检查容器是否已经打开可能会有所帮助:

<script>
    $('.new-discussion.small').click(function() {
        if ($(this).hasClass("small")) {
            $(this).addClass("expand").removeClass("small");
        }
    });
    $('a.cancel').click(function() {
        $(this).parent('.expand').addClass("small").removeClass("expand");
    });
</script>

- David Millar