jquery - jQuery 两个 if 语句用于 1 个变量，但仅适用于一个

Question

让我试着解释一下我想要完成的事情。我想做一个记忆难题，但我很难处理变量、if 语句和返回。

请您看一下我的示例，然后在块上单击三四次。我想在变量 == 1 时添加一些操作，而在变量 == 2 时添加其他操作。但是正如您所看到的，这不起作用，因为它会在一次后跳过警报 1...这是与返回（）？我相信是这样，但我希望你能解释我如何解决这个问题，以及它是否与退货有关。

示例 JSFIDDLE

HTML

<div id="container">
  <div class="coverup">
    <div class="hoverdiv"></div>
    <div class="image_A"></div>
  </div>
  <div class="coverup">
    <div class="hoverdiv"></div>
    <div class="image_B"></div>
  </div>
  <div class="coverup">
    <div class="hoverdiv"></div>
    <div class="image_A"></div>
  </div>
  <div class="coverup">
    <div class="hoverdiv"></div>
    <div class="image_B"></div>
  </div>
</div>

JS

var amountofclicks = 0;

$('.coverup').bind("click", function (event) {

  if (amountofclicks < 2) {
    $(this).find('.letter').show();
    amountofclicks++;

    if (amountofclicks == 2) {
      alert('2');
    }
    if (amountofclicks == 1) {
      alert('1');
    }
    $(this).children().show();


  } else {
    $('.coverup').children().hide();
    $(this).children().show();
    amountofclicks = 1;
    return;
  }


});

Answer 1

你应该ammountofclicks在最后设置为零。还有比它需要的更多的ifs。仅当图块尚不可见或ammountofclicks为零时，该函数才应运行，因此在开始时还要进行一次检查。

var amountofclicks = 0;

$('.coverup').bind("click", function (event) {
  if (amountofclicks==0 || !$(this).children().is(":visible")) {
    amountofclicks++;
    if (amountofclicks == 1) {
      $('.coverup').children().hide();
    }
    $(this).find('.letter').show();
    $(this).children().show();
    alert(amountofclicks);
    if (amountofclicks == 2) {
      amountofclicks = 0;
    }
  }
});

Answer 2

if 子句

if (amountofclicks == 2) { ... }

永远无法到达，因为它在以下 if 子句中

if (amountofclicks < 2) { ... }

更详细...

var amountofclicks = 2;

if (amountofclicks < 2) {
    // go here if amountofclicks < 2
    if (amountofclicks == 1) {
        // go here if amountofclicks == 1
    }
    if (amountofclicks == 2) {
        // unreachable, because amountofclicks is always < 2
    }
} else {
    // go here if amountofclicks >= 2
}

Answer 3

试试这个

var amountofclicks = 0;

$('.coverup').bind("click", function (event) {

  if (amountofclicks <= 2) {
    $(this).find('.letter').show();


    if (amountofclicks == 2) {
      alert('2');
    }
    if (amountofclicks == 1) {
      alert('1');
    }
    amountofclicks++;
    $(this).children().show();


  } else {
    $('.coverup').children().hide();
    $(this).children().show();
    amountofclicks = 1;
    return;
  }


});