Question

$('#myButton').click(function() {
    $('#buttonOne').click(function() {
      if(getOneOrTwo() === "one") {
        $('.firstObject').css('visibility', 'hidden');
        $('.secondObject').css('visibility','visible');
      } else {
          alert("Sorry, wrong guess.");
      }
     }
     
     $('#buttonTwo').click(function() {
      if(getOneOrTwo() === "two") {
        $('.firstObject').css('visibility', 'hidden');
        $('.secondObject').css('visibility','visible');
      } else {
          alert("Sorry, wrong guess.");
      }
  });

我在屏幕上有几张纸牌，上面都有钻石。首先，我把所有钻石都藏了起来。单击开始按钮时，我想在第一张卡片上显示一个菱形，并选择一个随机数，其中<0.5设置为红色，而> 0.5则设置为黑色。然后，用户通过单击黑色或红色按钮来猜测它是红色还是黑色。如果他们猜对了，则应该隐藏第一张卡片上的菱形，并且第二张卡片上将出现菱形以指示其在游戏中的进度。如果他们错了，它应该显示一个警报，告诉他们他们错了。红色按钮似乎工作正常，但是黑色按钮会导致警报在我每次关闭警报之前都继续弹出，直到正确为止，就好像不断单击按钮直到正确为止。

Answer 1

通常不应在其他点击处理程序中内设置点击处理程序。在大多数情况下，这是一种代码气味，就像这里一样。

您需要使“开始”按钮选择颜色（进行选择），但仅此而已；至少不要在此处为其他按钮分配点击处理程序。它可以工作，但是当您在特定的“开始”点击处理程序的外部定义点击处理程序时，它很简单。

红色/蓝色点击处理程序不应该再次选择颜色，因为那样的话，用户可以多次尝试相同的按钮，直到正确为止。似乎只有在单击“开始”按钮时才进行选择，这才合乎逻辑。

因此将所选卡存储在某个地方。像这样：

var selected = null; // No selection yet
$('#buttonOne, #buttonTwo').hide(); // Initially hide the guessing buttons.

$('#myButton').click(function() {
    selected = getOneOrTwo();
    $('#buttonOne, #buttonTwo').show(); // Now that we have a selection, allow guessing
});

$('#buttonOne').click(function() {
    if (selected === "one") {
        // here do what ever you want to do when the guess is right
    } else {
        alert("Sorry, wrong guess.");
    }
});

// Similarly for the other button

如何确保我的功能每次点击只能运行一次

1 个答案: