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

你的问题可能是event propagation（又名“冒泡”），这是一个DOM元素中的事件向其所有父母“起泡”的功能，除非明确告知事件不这样做。 / p>

换句话说，当有人点击<div#graphicsCloseBox>时，会按照您的指定正确添加和删除这些类。然后直接触发click <div#catbox>上的<div>事件，因为它会重置类 - 撤消点击内部$('#graphicsCloseBox').click(function(evt) { // your other stuff evt.stopPropagation(); return false; });的效果。

要解决此问题，请使用.stopPropagation()：

return false

它应该在没有{{1}}的情况下工作，但由于大多数浏览器都可以使用“虚假”返回值来防止冒泡，所以无论如何我经常把它塞进去。

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

onClick切换类问题

4 个答案: