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

Question

我坚持使用我的代码。因此，基本上，当我单击第一扇门时，它将打开一个图像。它根据我的条件随机数显示图像，例如：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>

Answer 1

Event Delegation

将eventListener()添加到列表（<ol>，<ul>等）中，然后创建if / else条件，其中<img>s是唯一要做出反应的元素到事件（例如click，mouseover等）。传递事件对象并使用：

• event.target将始终返回事件的来源（例如，单击<img>，鼠标悬停<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>

Answer 2

我在这里根据您的喜好写了它，请务必阅读评论

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

const door = true;


doorClick.forEach(function (test) {
  let t= test;
  test.addEventListener("click", function () {
  // reset all selected classes, remove this if not needed im not sure you want it
  doorClick.forEach((item)=>   item.querySelector("img").classList.remove("is-selected")) 
  
    if (door) {
      const doorRandom = Math.floor(Math.random() * 3) + 1;
      
     var img = t.querySelector("img");
      
      console.log(doorRandom);
      // add class selected to the image
      img.classList.add("is-selected")
      // change the src or what ever to the image
       if (doorRandom === 1) {
        img.src = "images/friends.png";
      } else {
        img.src = "images/empty-room.png";

      }
      
    }
  })
})

.is-selected{
border:1px solid red;
}

<div class="door-wrapper">
    <div class=" door-track-container">
      <ul class="door-track">
        <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>
        <li class="door-number">
          <a href="#"><img class="test1" src="images/door.png"></a>
        </li>
      </ul>
    </div>

  </div>

Answer 3

您可以使用

document.querySelector(".test1").classList.add("is-selected");

添加类和

document.querySelector(".test1").classList.remove("is-selected");

再次删除该课程

编辑：要获取所有元素，请使用querySelectorAll（）并遍历HTML集合