如何在 if 语句中增加计数器

Posted 2023-05-09

【中文标题】如何在 if 语句中增加计数器

【英文标题】：How can I increment a counter in an if statement

【发布时间】：2021-10-04 02:41:38

【问题描述】：

我目前正在使用 html、CSS 和 jQuery 编写一个迷你 Pokémon 游戏。游戏是关于寻找隐藏的神奇宝贝，每当我将鼠标悬停在它们上方时，它们都必须被计算在内。

我想创建一个带有if 语句的计数器，以便在我将鼠标悬停在它们上并登录到控制台时进行计数，但计数器根本不想增加。我尝试将if 语句放在`$(document).ready() 的内部和外部，但它根本不会增加

$(document).ready(function() 
  console.log("jQuery added and ready");

  $(".block").css("opacity", "0");
  $(".results").hide();

  $("div").hasClass(".extraClass");

  $(".poke-1").mouseenter(function() 
    $(this).css("opacity", "1");
  );

  $(".poke-1").mouseleave(function() 
    $(this).css("opacity", "0");
  );

  $(".poke-2").mouseenter(function() 
    $(this).css("opacity", "1");
  );

  $(".poke-2").mouseleave(function() 
    $(this).css("opacity", "0");
  );

  $(".poke-3").mouseenter(function() 
    $(this).css("opacity", "1");
  );

  $(".poke-3").mouseleave(function() 
    $(this).css("opacity", "0");
  );

  $(".poke-4").mouseenter(function() 
    $(this).css("opacity", "1");
  );

  $(".poke-4").mouseleave(function() 
    $(this).css("opacity", "0");
  );
)

var counter = 0;

if ($(".poke-1").mouseenter()) 
  counter++;
  console.log(counter);
 else if ($(".poke-2").mouseenter()) 
  counter++;
  console.log(counter);
 else if ($(".poke-3").mouseenter()) 
  counter++;
  console.log(counter);


if (counter > 4) 

  $(".results").slideDown();

* 
  padding: 0;
  margin: 0;
  font-family: sans-serif;


body 
  background-color: #F9F9F9;


.nav 
  width: 100%;
  text-align: center;
  padding-bottom: 30px;


.title 
  margin-bottom: 10px;
  text-align: center;


.nav img 
  margin-top: 10px;


.container 
  width: 80%;
  margin-left: 10%;
  margin-top: 40px;


.hidden-blocks 
  width: 100%;
  display: flex;
  justify-content: space-around;


.block 
  padding: 60px;
  border-radius: 50%;
  margin: 0px 20px;
  border: 1px solid #E0E0E0;
  background-color: #F9F9F9;
  font-family: sans-serif;
  transition: 0.2s;
  text-align: center;
  width: 150px;
  height: 150px;
  /* RE-ADD THE OPACITY */
  /* opacity: 0; */


.block img 
  margin-top: 20px;
  margin-bottom: 10px;
  width: 60px;


.block p 
  margin-top: 10px;


.block:hover 
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  cursor: pointer;


.results 
  text-align: center;
  margin-top: 50px;
  background-color: #E84E4A;
  color: #101010;
  padding: 30px;
  border-radius: 30px;
  box-shadow: rgba(66, 34, 34, 0.2) 0px 2px 8px 0px;
  /* RE-ADD THE DISPLAY NONE
*/
  /* display: none; */


.results h5 
  padding: 10px;
  border-radius: 5px;
  border: 1px solid black;
  width: 150px;
  margin: 0 auto;
  margin-top: 15px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
  <div class="nav">
    <h1 class="title">Pokémon Game</h1>
    <h5>Find the hidden Pokémon</h5>
    <img src="img/pokeball.png"   />
  </div>

  <div class="hidden-blocks">
    <div class="block poke-1">
      <img src="img/meowth.png">
      <h2>Meowth</h2>

    </div>
    <div class="block poke-2">
      <img src="img/bullbasaur.png">
      <h2>Bullbasaur</h2>

    </div>
    <div class="block poke-3">
      <img src="img/pikachu.png">
      <h2>Pikachu</h2>

    </div>
    <div class="block poke-3">
      <img src="img/squirtle.png">
      <h2>Squirtle</h2>
    </div>
  </div>
  <div class="results">
    <img src="img/gotcha.png"  >
    <h1>You Caught 'Em All!</h1>
    <h5>Move your pointer over here to restart</h5>
  </div>
</div>

【参考方案1】：

您的代码的主要问题是您试图在if 语句中使用事件处理程序。这不是有效的 javascript。您需要将一些逻辑挂钩到事件处理程序并在事件运行时执行它；与您在 mouseenter 和 mouseleave 事件中所做的完全一样。

另请注意，您的代码中还有一些其他问题。首先，在 CSS 而不是 JS 中设置元素的 opacity 和 display 状态。这是为了避免页面首次加载时出现FOUC。

其次，您可以通过在元素上使用相同的 .poke 类而不是增量 .poke-X 来删除 JS 代码中的重复。这允许您对所有元素使用单个事件处理程序，而不是每个元素一个。这种技术被称为“不要重复自己”或“干”。

最后，您没有将返回值从 hasClass() 设置为变量，因此这行代码没有任何作用，可以删除。

说了这么多，试试这个工作示例：

let counter = 0;  

jQuery($ => 
  $(".poke").mouseenter(function() 
    $(this).css("opacity", "1");
    counter++;
    checkCounter();
  );

  $(".poke").mouseleave(function() 
    $(this).css("opacity", "0");
  );
)

let checkCounter = () => 
  if (counter > 4)
    $(".results").slideDown();

* 
  padding: 0;
  margin: 0;
  font-family: sans-serif;


body 
  background-color: #F9F9F9;


.nav 
  width: 100%;
  text-align: center;
  padding-bottom: 30px;


.title 
  margin-bottom: 10px;
  text-align: center;


.nav img 
  margin-top: 10px;


.container 
  width: 80%;
  margin-left: 10%;
  margin-top: 40px;


.hidden-blocks 
  width: 100%;
  display: flex;
  justify-content: space-around;


.block 
  padding: 60px;
  border-radius: 50%;
  margin: 0px 20px;
  border: 1px solid #E0E0E0;
  background-color: #F9F9F9;
  font-family: sans-serif;
  transition: 0.2s;
  text-align: center;
  width: 150px;
  height: 150px;
  opacity: 0;


.block img 
  margin-top: 20px;
  margin-bottom: 10px;
  width: 60px;


.block p 
  margin-top: 10px;


.block:hover 
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  cursor: pointer;


.results 
  text-align: center;
  margin-top: 50px;
  background-color: #E84E4A;
  color: #101010;
  padding: 30px;
  border-radius: 30px;
  box-shadow: rgba(66, 34, 34, 0.2) 0px 2px 8px 0px;
  display: none;


.results h5 
  padding: 10px;
  border-radius: 5px;
  border: 1px solid black;
  width: 150px;
  margin: 0 auto;
  margin-top: 15px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
  <div class="nav">
    <h1 class="title">Pokémon Game</h1>
    <h5>Find the hidden Pokémon</h5>
    <img src="img/pokeball.png"   />
  </div>
  <div class="hidden-blocks">
    <div class="block poke">
      <img src="img/meowth.png">
      <h2>Meowth</h2>
    </div>
    <div class="block poke">
      <img src="img/bullbasaur.png">
      <h2>Bullbasaur</h2>
    </div>
    <div class="block poke">
      <img src="img/pikachu.png">
      <h2>Pikachu</h2>
    </div>
    <div class="block poke">
      <img src="img/squirtle.png">
      <h2>Squirtle</h2>
    </div>
  </div>
  <div class="results">
    <img src="img/gotcha.png"  >
    <h1>You Caught 'Em All!</h1>
    <h5>Move your pointer over here to restart</h5>
  </div>
</div>

【讨论】：

感谢您的反馈，对不起，我还是大学生，还在学习jQuery/JS，不知道下面的代码是什么意思：$($ => $( ".poke").mouseenter(function() $(this).css("opacity", "1"); counter++; checkCounter(); ); $(".poke").mouseleave(function() $(this).css("opacity", "0"); ); ) let checkCounter = () => if (counter > 4) $(".results").slideDown(); 控制台日志（计数器）； )

另外，let 和 => 是什么意思，如果你不介意向我解释的话。

当然，MDN 是了解 Javascript 的绝佳资源。查看他们关于let 关键字和arrow functions 的文章