jquery - 单击一个div后，如何在多个div上停止jquery单击功能？

Question

我有几个具有点击功能的 div，基本上可以为您选择的框“投票”。

在有人想选择第二个或第三个盒子之前，这很有效。单击功能与 div 的类相关联，因此我需要在单击一次后禁用单击功能。

$('.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>

我必须使用“一”功能来禁用当前 div 上的单击功能，以便用户可以单击表单输入。问题是其他选项仍然是“可点击的”。因此，用户可以根据需要对所有三个选项进行投票。我怎样才能将其限制为一票？

Answer 1

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

我会建议这段代码

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

使用命名空间事件，您将不会更改其他单击事件处理程序（如果有的话）。

Answer 2

课程不应以句点开头：

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

小提琴

Answer 3

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

使用变量。设置它的值