Question

我有几个带有点击功能的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上的click功能，以便用户可以单击表单输入。问题是其他选项仍然是“可点击的”。因此，如果用户愿意，用户可以投票选出所有三个选项。我怎样才能将此限制为一票？

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

FIDDLE

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

使用变量。设置其值

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

3 个答案: