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