0

我在这个问题中使用了方法： 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次点击toggle a hidden checkbox，多次点击是不合理的。

有人可以帮我找出导致此问题的原因吗？

4

5 回答 5

2

click 函数触发两次，一次用于图像，一次用于输入，因为两者都会冒泡到父元素，并且触发两次会再次恢复类（证明）。

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

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

小提琴

于 2013-07-23T07:54:33.220 回答
1

我来宾，您需要选中复选框以及切换您的 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');
       }                        
    });
});
于 2013-07-23T08:11:06.160 回答
1

您的代码触发了两次点击事件。所以使用.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

于 2013-07-23T07:56:39.443 回答
0

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

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

});

这是一个FIDDLE。

于 2013-07-23T08:22:29.663 回答
0

尝试这个

jQuery(document).on("click",'.checkbox_wrapper', function(e){
   jQuery(this).parent()
   .toggleClass('not_selected')
   .toggleClass('selected');
});
于 2013-07-23T07:50:03.603 回答