随机数不起作用，仅显示在第一个元素上

USS 发表于 Dev

乌斯

我坚持我的代码。因此，基本上，当我单击第一扇门时，它将打开一个图像。它根据我的条件随机数显示图像，例如：1 =门是空的，2 =您找到了那个人。

当我单击第二扇门时，刚打开的第一扇门将返回到原始图像，如果我打开第三扇门，则第二件事将返回到原始图像。

我的问题是门仅在第一扇门上打开，而第二和第三扇门没有打开。我想我需要添加“ .is-selected”，但是我不确定如何实现它。

但是我不想使用html，而是要使用javascript。

const doorTarget = document.querySelector(".door-track");
const doorClick = Array.from(doorTarget.children);

const door = true;

doorClick.forEach(function (test) {
  test.addEventListener("click", function () {
    if (door) {
      const doorRandom = Math.floor(Math.random() * 3) + 1;
      //const currentSelector = doorTarget.querySelector(".is-selected");
      //const image = currentSelector.nextElementSibling;

      //currentSelector.classList.remove('is-selected')
      //image.classList.add('is-selected')

      console.log(doorRandom);

      if (doorRandom === 1) {
        document.querySelector(".test1").src = "images/friends.png";
      } else {
        document.querySelector(".test1").src = "images/empty-room.png";

      }
    }
  })
})

<div class="door-wrapper">
    <div class=" door-track-container">
      <ul class="door-track">
        <li class="door-number">
          <a href="#"><img class="test1 is-selected" src="images/door.png"></a>
        </li>
        <li class="door-number">
          <a href="#"><img class="test1" src="images/door.png"></a>
        </li>
        <li class="door-number">
          <a href="#"><img class="test1" src="images/door.png"></a>
        </li>
      </ul>
    </div>

  </div>

zer00ne

活动委托

一个添加eventListener()到列表中（<ol>，<ul>，等），然后创建的if / else条件，其中<img>s是反作用于所述事件的唯一元件（实施例click，mouseover等）。传递事件对象并使用：

event.target将始终返回事件的来源（例如clicked <img>，mouseover<div>等）
event.currentTarget是具有的元素eventListener()。

 <ol id='list'>...</ol>
 document.querySelector('#list').addEventListener('click', function(event) {...

另外，如果您<a>s用作按钮并且希望它们停止跳跃，请更改以下内容：

  <a href="#/"></a>

只需添加一个正斜杠： /

演示版

演示中将评论详细信息。

// This will be event.currentTarget
const doorTarget = document.querySelector(".door-track");
// Collect all img.test1 into a NodeList
const doors = document.querySelectorAll('.test1');

// Remember to always pass the event object
doorTarget.addEventListener("click", function(event) {
  // Set all img.src to default
  doors.forEach(function(door) {
    door.src = "https://placeimg.com/160/90/nature";
  });

  // if the clicked element is NOT the list itself... 
  if (event.target !== event.currentTarget) {
    // if the clicked element's class is .test1
    if (event.target.className === "test1") {
      // Get random number in the range of 1 to 3
      const doorRandom = Math.floor(Math.random() * 3) + 1;
      // if that number is 1...
      if (doorRandom === 1) {
        // Change the clicked src to a person image
        event.target.src = "https://placeimg.com/160/90/people";
      } else {
        // Otherwise change clicked src to a tech image
        event.target.src = "https://placeimg.com/160/90/tech";
      }
    }
  }
});

ul {
  display: flex;
  list-style: none;
}

<div class="door-wrapper">
  <div class=" door-track-container">
    <ul class="door-track">
      <li class="door-number">
        <a href="#/"><img class="test1" src="https://placeimg.com/160/90/nature"></a>
      </li>
      <li class="door-number">
        <a href="#/"><img class="test1" src="https://placeimg.com/160/90/nature"></a>
      </li>
      <li class="door-number">
        <a href="#/"><img class="test1" src="https://placeimg.com/160/90/nature"></a>
      </li>
    </ul>
  </div>

</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。