AddeventListener 表现怪异？

Question

<section class="game--section">
        <div class="game-space">
            <div class="box box1 active-box"></div>
            <div class="box box2"></div>
            <div class="box box3"></div>
            <div class="box box4"></div>
            <div class="box box5"></div>
            <div class="box box6"></div>
        </div>
        <div class="restart-button">🔁</div>
    </section>

我有一个包含 6 个子框的 div(.game-space)，其中一个是具有绿色背景的 ('.active-Box) 类的活动框，

所以当我点击活动框时，它会将其类（.active-Box）移动到下一个以这种方式提供绿色背景的框，它一直到最后一个框。

我还有重启按钮，当我点击它时，游戏应该重新启动，就像活动框类被标记到第一个框，然后从这里它再次转移到下一个类并一直到结束框点击

但是，在单击重新启动按钮之前，框之间的移动是一个接一个地线性移动，但是在单击重新启动按钮之后，框被跳过而不是线性移动，跳过一些框之间，为什么？任何解决方案？

'use strict'
const allBox = document.querySelectorAll('.box');
const activeBox = document.querySelector('.active-box')
const restartButton = document.querySelector('.restart-button')
let active_box_index = activeBox_index_function();

slideBox(allBox[active_box_index]);

function slideBox(pass_active_box) {
  pass_active_box.addEventListener('click', function() {
    allBox[active_box_index].classList.remove('active-box')
    allBox[active_box_index + 1].classList.add('active-box')

    active_box_index = activeBox_index_function()
    slideBox(allBox[active_box_index]);
  })
}

console.log(allBox);

// active box index
function activeBox_index_function() {
  let index;
  allBox.forEach((el, indx) => {
    if (el.matches('.active-box')) {
      index = indx
    };
  })
  return index;
}

// when restart button clicked
restartButton.addEventListener('click', function() {
  allBox[active_box_index].classList.remove('active-box')
  allBox[0].classList.add('active-box')

  active_box_index = activeBox_index_function()
})

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,800&display=swap');
@import url('https://fonts.cdnfonts.com/css/common-pixel');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: 'Poppins', sans-serif;
  color: black;
}

.game--section {
  height: 100vh;
  background-color: #252525;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-space {
  width: 80rem;
  height: 10rem;
  padding: 1rem;
  border-radius: 9px;
  background-color: #f5f5f5;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.box {
  background-color: tomato;
}

.active-box {
  background-color: #099268;
  cursor: pointer;
}

.restart-button {
  font-size: 3rem;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <section class="game--section">
    <div class="game-space">
      <div class="box box1 active-box"></div>
      <div class="box box2"></div>
      <div class="box box3"></div>
      <div class="box box4"></div>
      <div class="box box5"></div>
      <div class="box box6"></div>
    </div>
    <div class="restart-button">🔁</div>
  </section>

  <script src="script.js"></script>
</body>

</html>

Answer 1

您可以按以下方式更新您的代码：

删除对
```
slideBox
```
的递归调用并增加
```
active_box_index
```
变量。
检查
```
active_box_index
```
是否已到达框的末尾，如果是则将其重置为 0.

在

restartButton event

侦听器中将

active_box_index

变量重置为 0 而不是

calling activeBox_index_function()

.

'use strict'
const allBox = document.querySelectorAll('.box');
const activeBox = document.querySelector('.active-box')
const restartButton = document.querySelector('.restart-button')
let active_box_index = activeBox_index_function();

slideBox(allBox[active_box_index]);

function slideBox(pass_active_box) {
  pass_active_box.addEventListener('click', function() {
    allBox[active_box_index].classList.remove('active-box');
    active_box_index++; //increment the index instead of using activeBox_index_function() to calculate it again
    if (active_box_index === allBox.length) { //if reached the end of the boxes, reset the index to 0
      active_box_index = 0;
    }
    allBox[active_box_index].classList.add('active-box');
  })
}

//console.log(allBox);

// active box index
function activeBox_index_function() {
  let index;
  allBox.forEach((el, indx) => {
    if (el.matches('.active-box')) {
      index = indx
    };
  })
  return index;
}

// when restart button clicked
restartButton.addEventListener('click', function() {
  allBox[active_box_index].classList.remove('active-box')
  allBox[0].classList.add('active-box')

  active_box_index = 0; //reset the index to 0 when restarting the game
})

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,800&display=swap');
@import url('https://fonts.cdnfonts.com/css/common-pixel');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: 'Poppins', sans-serif;
  color: black;
}

.game--section {
  height: 100vh;
  background-color: #252525;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-space {
  width: 80rem;
  height: 10rem;
  padding: 1rem;
  border-radius: 9px;
  background-color: #f5f5f5;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.box {
  background-color: tomato;
}

.active-box {
  background-color: #099268;
  cursor: pointer;
}

.restart-button {
  font-size: 3rem;
  cursor: pointer;
}

<section class="game--section">
  <div class="game-space">
    <div class="box box1 active-box"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
    <div class="box box5"></div>
    <div class="box box6"></div>
  </div>
  <div class="restart-button">🔁</div>
</section>

AddeventListener 表现怪异？

问题描述投票：0回答：1

1个回答

最新问题

AddeventListener 表现怪异？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1