jquery - onClick 切换类问题

Question

我所拥有的是<div#graphicsCloseBox>嵌套在里面<div#catbox>。应该是当您单击 时，类会变回来。我不能使用toggleClass，因为框内有一个表单输入，所以单击表单会搞砸。

 $('#catbox').click(function() {
        $(this).removeClass('cat');
        $(this).addClass('cat2');
});
$('#graphicsCloseBox').click(function() {
    $('#catbox').removeClass('cat2');
    $('#catbox').addClass('cat');
});

如果您想要一个示例，请查看http://codepen.io/rtro92/pen/mihlu 但这非常简单。我知道我的问题出在第二个函数中，我只是无法定位#catbox。谢谢！

Answer 1

您的点击事件正在冒泡到外部 DIV。

利用.stopPropagation()

$('#catbox').click(function() {
        $(this).removeClass('cat');
        $(this).addClass('cat2');
});
$('#graphicsCloseBox').click(function(event) {
    $('#catbox').removeClass('cat2');
    $('#catbox').addClass('cat');
    event.stopPropagation();
});

Answer 2

您的问题可能是事件传播（又名“冒泡”），这是一个 DOM 元素中的事件“冒泡”到其所有父级的功能，除非明确告知该事件不要这样做。

换句话说，当有人单击 时<div#graphicsCloseBox>，会按照您的指定正确添加和删除类。然后紧接着触发clickon<div#catbox>事件，这 - 因为它重置了类 - 撤销了点击 inner 的效果<div>。

要修复它，请使用.stopPropagation()：

$('#graphicsCloseBox').click(function(evt) {
    // your other stuff
    evt.stopPropagation();
    return false;
});

它应该在没有return false结束的情况下工作，但由于大多数浏览器可以使用“虚假”返回值来防止冒泡，所以我通常把它塞在那里。

Answer 3

进行此更改：

$('#graphicsCloseBox').click(function(e) {
    e.stopPropagation();  //<---This stops it from bubbling up, toggle now works.
    $('#catbox').removeClass('cat2');
    $('#catbox').addClass('cat');
});

Answer 4

看起来您正在处理事件冒泡 - 单击 #graphicsCloseBox 也会触发 #catbox 上的单击操作。尝试阻止事件冒泡。

$('#graphicsCloseBox').click(function(e) {
    e.stopPropagation();
    $('#catbox').removeClass('cat2');
    $('#catbox').addClass('cat');
});