单击一个div后,如何在多个div上停止jquery单击函数



我有几个带有点击功能的div,基本上是为您选择的框"投票"。

这很有效,直到有人想选择第二个或第三个盒子。click函数与div的类绑定,所以我需要在单击一次之后禁用click函数。

$('.vote').on('click',function(){
    $(this).append('<div id="voted">Thanks!<form><input type="text" name="comment"></form></div>');
});
<div class="vote">Option A</div>
<div class="vote">Option B</div>
<div class="vote">Option C</div>

我必须使用"one"函数来禁用当前div上的单击函数,以便用户可以单击表单输入。问题是其他选项仍然是"可点击的"。因此,如果用户愿意,他们可以对这三个选项进行投票。我怎么能把投票限制在一票以内?

虽然提供的两种解决方案都能工作,但删除事件处理程序是有意义的,因为它无论如何都不会被使用。

我建议这个代码

 $('.vote').on('click.vote', function () {
      $(this).append('<div id="voted">Thanks!<form><input type="text" name="comment"></form></div>');
      $('.vote').off('click.vote');
 });

使用带名称空间的事件,您将不会更改其他单击事件处理程序(如果有的话)。

类不应以句点开头:

<div class="vote">Option A</div>
<div class="vote">Option B</div>
<div class="vote">Option C</div>

使用标志使整个类只能点击一次:

var flag = true;
$('.vote').one('click',function(){
    if (flag) {
        $(this).append('<div id="vote">Thanks!<form><input type="text" name="comment"></form></div>');
        flag = false;
    }
});

FIDDLE

var clicked=0;
$('.vote').on('click',function(){
    if(clicked==0){
        clicked=1;
            $(this).append('<div id="voted">Thanks!<form><input type="text" name="comment"></form></div>');
    }
});

使用变量。设置其值

相关内容

  • 没有找到相关文章