Question

我使用了这个问题中的方法： change div class onclick on another div, and change back on body click

所以这是我的jQuery函数：

jQuery('.checkbox_wrapper').on('click', function(e){
   jQuery(this).parent()
   .toggleClass('not_selected')
   .toggleClass('selected'); 
});

然而它似乎没有正常工作。在课程更改之前需要多次点击。

看我的jsfiddle： http://jsfiddle.net/7A3vw/

我把它简化为最基本的想法，认为它可能是冲突的javascript，但即使使用单一功能，它需要在课程实际更改之前多次点击。由于生产环境有1次单击切换隐藏的复选框，因此多次点击是不合理的。

有人可以帮我弄清楚造成这个问题的原因吗？

Answer 1

click函数会触发两次，一次触发图像，一次触发输入，因为两者都会冒泡到父元素，然后再触发两次会再次恢复类（proof）。

只需定位图像，因为这是您真正想要点击的内容，而不是父项：

jQuery('.deck_card img').on('click', function (e) {
    jQuery(this).closest('div').parent().toggleClass('not_selected selected')
});

FIDDLE

Answer 2

您的代码触发了两次点击事件。因此，请使用.preventDefault()

这样就不会触发事件的默认操作。

$('.checkbox_wrapper').on('click', function(e){
    $(this).parent()
    .toggleClass('not_selected')
    .toggleClass('selected');
    e.preventDefault();  // prevent the default action to be 
});                      // triggered for next time

选中此JSFiddle

Answer 3

我是客人，您需要选中复选框以及div的切换。

$(document).ready(function(e) {
    $('.checkbox_wrapper').on('click', function(e){ 
       var checked = $(this).find('input[type="checkbox"]').is(":checked");
       if(checked){
        jQuery(this).parent().addClass('selected').removeClass('not_selected');
       }else{
        jQuery(this).parent().addClass('not_selected').removeClass('selected');
       }                        
    });
});

Answer 4

试试这个

jQuery(document).on("click",'.checkbox_wrapper', function(e){
   jQuery(this).parent()
   .toggleClass('not_selected')
   .toggleClass('selected');
});

Answer 5

由于您正在使用类选择器，因此会触发多次单击。您需要使用not排除额外元素：

jQuery("div.checkbox_wrapper :not('div.checkboxdiv')").on('click', function(e){
    jQuery(this).parent()
    .toggleClass('not_selected selected')

});

这是FIDDLE。

在点击之前更改Div Class需要多次点击才能运行

5 个答案: