如何允许用户在jquery中的按钮上仅单击3次？

问题描述

| 我正在尝试制作一些剪刀石头布游戏。为此，我在jquery中编写了一个小javascript。整个过程应该是这样的：用户按下按钮，触发ajax事件，将所选选项添加到div中，然后计数器增加。但是只有3次！我无法弄清楚像这样工作...这是我的代码

if (counter <= 3){
    $(\'.buStein1\').click(function(event){
        $.post(\"game.php\",{ uid: \"<?php echo $user[\'id\']?>\",choice: \"stein\",runde: counter  });
        $(\'#choiceContainer\').append(stein);
        counter++;
      });
    $(\'.buSchere1\').click(function(event){
        $.post(\"game.php\",choice: \"schere\",runde: counter  });
        $(\'#choiceContainer\').append(schere);
        counter++;
      });
    $(\'.buPapier1\').click(function(event){
        $.post(\"game.php\",choice: \"papier\",runde: counter  });
        $(\'#choiceContainer\').append(papier);
        counter++;
      });
}
else {
    $(\'#choiceContainer\').text(\'no clicking possible\');
}

    

解决方法

        首先在功能之外定义计数器：

var counter = 0;

然后在执行其他任何操作之前，请在click事件处理程序中检查计数器：

$(\'.buStein1\').click(function(event){
    if (checkCounter()) {
      $.post(\"game.php\",{ uid: \"<?php echo $user[\'id\']?>\",choice: \"stein\",runde: counter  });
      $(\'#choiceContainer\').append(stein);
    }
  });
$(\'.buSchere1\').click(function(event){
    if (checkCounter()) {
      $.post(\"game.php\",choice: \"schere\",runde: counter  });
      $(\'#choiceContainer\').append(schere);
    }
  });
$(\'.buPapier1\').click(function(event){
    if (checkCounter()) {
      $.post(\"game.php\",choice: \"papier\",runde: counter  });
      $(\'#choiceContainer\').append(papier);
    }
  });


function checkCounter() 
{
  if (counter > 3)
  {
    $(\'#choiceContainer\').text(\'no clicking possible\');
    return false;
  }

  counter++;
  return true;
}

    ,        

if (counter <= 3)

检查应在

click

功能内。 如果计数器小于3，则当前绑定的是click事件。