必须至少遍历一次元素才能执行 JS 代码

Question

我在 HTML CSS JS 中做一个连接四，如果你悬停在网格上，我想在网格顶部显示一个标记，对齐列所以我把网格的监听器。但是要显示它，我需要至少遍历所有元素一次，然后它会按预期显示。

这是代码片段，对于低质量的代码，我深表歉意

quiJoue = 0;

$('#grille').on("mouseover", function(e) {
  let couleur = quiJoue % 2 === 0 ? "Jaune" : "Rouge";
  let classes = e.target.classList;
  if (classes.contains("top") && classes.contains("pion")) {
    let courant = e.target;
    $(courant).css("background", 'yellow').css("background-size", "contain");
  } else if (classes.contains('pion')) {
    let courant = (e.target);
    let colonne = (e.target.parentNode.classList[2]).split("-")[1];
    $('.cell.row-top.colonne-' + colonne).children().css("background", 'yellow').css("background-size", "contain")
    $(courant).hover(function() {
      $('.cell.row-top.colonne-' + colonne).children().addClass('top_hover');
    }, function() {
      $('.cell.row-top.colonne-' + colonne).children().removeClass('top_hover')
    });
  } else if (classes.contains('cell')) {
    let colonne = (e.target.classList[2]).split("-")[1];
    let courant = (e.target);
    $('.cell.row-top.colonne-' + colonne).children().css("background", 'yellow').css("background-size", "contain")
    $(courant).hover(function() {
      $('.cell.row-top.colonne-' + colonne).children().addClass('top_hover');
    }, function() {
      $('.cell.row-top.colonne-' + colonne).children().removeClass('top_hover')
    });

  }
});

.game-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: 700px;
  margin: 10px 0 25px;
  width: 700px;
}

.cell {
  align-items: center;
  background: #4370F1;
  display: flex;
  height: 100px;
  justify-content: center;
  width: 100px;
}

.pion {
  background: white;
  background-size: contain;
  border-radius: 50%;
  border: 3px solid black;
  height: 75px;
  width: 75px;
}

.top {
  transition: opacity 50ms linear;
  opacity: 0;
  border: 0;
}

.top:hover {
  transition: opacity 50ms linear;
  background-size: contain;
  opacity: 1;
}

.top_hover {
  transition: opacity 50ms linear;
  background-size: contain;
  opacity: 1;
}

.cell:not(.row-top).red::after {
  background: red;
}

.cell:not(.row-top).yellow::after {
  background: yellow;
}

.cell:not(.row-top).red.win {
  background: red;
}

.cell:not(.row-top).yellow.win {
  background: yellow;
}

.cell.row-top {
  background: rgba(255, 255, 255, 0);
}

.cell.row-top::after {
  border: none;
}

.cell.row-top.red::after {
  background: red;
  border: 3px solid black;
}

.cell.row-top.yellow::after {
  background: yellow;
  border: 3px solid black;
}

.left-border {
  border-left: 3px solid black;
}

.top-border {
  border-top: 3px solid black;
}

.right-border {
  border-right: 3px solid black;
}

.bottom-border {
  border-bottom: 3px solid black;
}

.left-border.top-border {
  border-radius: 10px 0 0 0;
}

.right-border.top-border {
  border-radius: 0 10px 0 0;
}

.right-border.bottom-border {
  border-radius: 0 0 10px 0;
}

.left-border.bottom-border {
  border-radius: 0 0 0 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-center justify-content-center d-flex">
  <div class="game-board justify-content-center" id="grille" style="grid-template-columns: repeat(7, 1fr);">
    <div class="cell row-top colonne-0">
      <div class="pion justify-content-center d-flex top" style="background: rgba(0, 0, 0, 0) url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-1">
      <div class="pion justify-content-center d-flex top" style="background: rgba(0, 0, 0, 0) url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-2">
      <div class="pion justify-content-center d-flex top" style="background: rgba(0, 0, 0, 0) url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-3">
      <div class="pion justify-content-center d-flex top" style="background: rgba(0, 0, 0, 0) url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-4">
      <div class="pion justify-content-center d-flex top" style="background: rgba(0, 0, 0, 0) url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-5">
      <div class="pion justify-content-center d-flex top" style="background: rgba(0, 0, 0, 0) url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-6">
      <div class="pion justify-content-center d-flex top" style="background: rgba(0, 0, 0, 0) url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-0 colonne-0 left-border top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-1 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-2 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-3 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-4 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-5 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-6 right-border top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-0 left-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-1 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-2 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-3 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-4 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-5 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-6 right-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-0 left-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-1 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-2 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-3 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-4 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-5 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-6 right-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-0 left-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-1 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-2 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-3 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-4 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-5 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-6 right-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-0 left-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-1 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-2 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-3 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-4 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-5 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-6 right-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-0 left-border bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-1 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-2 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-3 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-4 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-5 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-6 right-border bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
  </div>
</div>

Answer 1

我将尝试在一些要点中演示该问题，如果它们不够清楚，请告诉我。

编译过程结束并加载页面后，没有附加到游戏元素的侦听器。
在第一次悬停迭代中，您的代码将动态初始化事件侦听器但不会执行它。
之后，您的元素将附加一个侦听器，从现在开始将触发其回调函数。
因此，对于此后的每个悬停事件，您的代码都将按预期工作

解决方案

我们需要将事件侦听器静态地而不是动态地附加到所有游戏元素。所以这是我们需要的 JS 代码。

    $(".pion").hover(function(e) {
      const colonne = (e.target.parentNode.classList[2]).split("-")[1];
      $('.cell.row-top.colonne-' + colonne).children().toggleClass('top_hover');
    })

它会 select 所有带有 pion class 的元素，并会附加我们的悬停事件，切换相关 colonne 号码的 class 名称.

注意：在所有列的 HTML 代码段中，我将 hard-coded 标记的背景色设置为黄色。您可以删除它并处理 Jaune 和 Rouge

的逻辑

<div class="pion justify-content-center d-flex top" style="background: yellow url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>

$(".pion").hover(function(e) {
  const colonne = (e.target.parentNode.classList[2]).split("-")[1];
  $('.cell.row-top.colonne-' + colonne).children().toggleClass('top_hover');
})

.game-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: 700px;
  margin: 10px 0 25px;
  width: 700px;
}

.cell {
  align-items: center;
  background: #4370F1;
  display: flex;
  height: 100px;
  justify-content: center;
  width: 100px;
}

.pion {
  background: white;
  background-size: contain;
  border-radius: 50%;
  border: 3px solid black;
  height: 75px;
  width: 75px;
}

.top {
  transition: opacity 50ms linear;
  opacity: 0;
  border: 0;
}

.top:hover {
  transition: opacity 50ms linear;
  background-size: contain;
  opacity: 1;
}

.top_hover {
  transition: opacity 50ms linear;
  background-size: contain;
  opacity: 1;
}

.cell:not(.row-top).red::after {
  background: red;
}

.cell:not(.row-top).yellow::after {
  background: yellow;
}

.cell:not(.row-top).red.win {
  background: red;
}

.cell:not(.row-top).yellow.win {
  background: yellow;
}

.cell.row-top {
  background: rgba(255, 255, 255, 0);
}

.cell.row-top::after {
  border: none;
}

.cell.row-top.red::after {
  background: red;
  border: 3px solid black;
}

.cell.row-top.yellow::after {
  background: yellow;
  border: 3px solid black;
}

.left-border {
  border-left: 3px solid black;
}

.top-border {
  border-top: 3px solid black;
}

.right-border {
  border-right: 3px solid black;
}

.bottom-border {
  border-bottom: 3px solid black;
}

.left-border.top-border {
  border-radius: 10px 0 0 0;
}

.right-border.top-border {
  border-radius: 0 10px 0 0;
}

.right-border.bottom-border {
  border-radius: 0 0 10px 0;
}

.left-border.bottom-border {
  border-radius: 0 0 0 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-center justify-content-center d-flex">
  <div class="game-board justify-content-center" id="grille" style="grid-template-columns: repeat(7, 1fr);">
    <div class="cell row-top colonne-0">
      <div class="pion justify-content-center d-flex top" style="background: yellow url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-1">
      <div class="pion justify-content-center d-flex top" style="background: yellow url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-2">
      <div class="pion justify-content-center d-flex top" style="background: yellow url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-3">
      <div class="pion justify-content-center d-flex top" style="background: yellow url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-4">
      <div class="pion justify-content-center d-flex top" style="background: yellow url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-5">
      <div class="pion justify-content-center d-flex top" style="background: yellow url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-top colonne-6">
      <div class="pion justify-content-center d-flex top" style="background: yellow url(&quot;../img/pionJaune.png&quot;) repeat scroll center center / contain;"></div>
    </div>
    <div class="cell row-0 colonne-0 left-border top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-1 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-2 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-3 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-4 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-5 top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-0 colonne-6 right-border top-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-0 left-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-1 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-2 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-3 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-4 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-5 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-1 colonne-6 right-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-0 left-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-1 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-2 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-3 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-4 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-5 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-2 colonne-6 right-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-0 left-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-1 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-2 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-3 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-4 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-5 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-3 colonne-6 right-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-0 left-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-1 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-2 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-3 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-4 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-5 " data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-4 colonne-6 right-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-0 left-border bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-1 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-2 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-3 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-4 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-5 bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
    <div class="cell row-5 colonne-6 right-border bottom-border" data-couleur="">
      <div class="pion justify-content-center d-flex"></div>
    </div>
  </div>
</div>

必须至少遍历一次元素才能执行 JS 代码

It is necessary to go over an element at least once to execute JS code

html

javascript

css

jquery

mousehover