如何將切換功能應用于包含多個影像的div中的divonclick中的一個影像？

我在其他影像之上有多個影像。在影像上單擊一個切換功能應該發生，使頂部影像的不透明度為 0，從而顯示下面的影像。我希望這適用于單擊的單個影像。問題是點擊切換功能一次從 div 中洗掉所有頂部影像。我嘗試重新撰寫代碼以嘗試訪問 div 中的子元素，即單個影像，但這也不起作用。

function shuffle(array) {
  let currentIndex = array.length,
    randomIndex;

  while (currentIndex != 0) {

    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]
    ];
  }

}
const images$Rear = [{
    name: "rear.1a",
    img: "rear.1a.png",
  },
  {
    name: "rear.1b",
    img: "rear.1b.png",
  },
  {
    name: "rear.2a",
    img: "rear.2a.png",
  },
  {
    name: "rear.2b",
    img: "rear.2b.png",
  },
]


shuffle(images$Rear)

let click4RearImage = document.querySelector("#StartButton");
click4RearImage.addEventListener("click", DisplayRearImage);

function DisplayRearImage(k) {
  let rearImage = document.createElement('img');
  rearImage.src = `Images/${images$Rear[k].img}`;
  document.querySelector("#cardsRear").appendChild(rearImage);
  rearImage.addEventListener("click", function(e) {
    console.log(e.target.src);
  })
}


let thisCard = document.querySelector('#cardsRear');
let allChildren = thisCard.querySelectorAll(":scope > Card_Rear")
for (let z = 0; z < thisCard.length; z  ) {
  thisCard[z].addEventListener('click', function() {
    allChildren.forEach(item => item.classList.toggle('is-flipped'));
  });
}
console.log(allChildren);

.Card_Rear .is-flipped {
  opacity: 0;
}

<div class="flex_container_start-button"> <button type="button" class="btn btn-primary" id="StartButton">Click to Begin</button> </button>
</div>
<div class="flex_container_board" id="Game_Board">
  <div class="Our-Card" id="ourCard">
    <div class="Card_Front" id=cardsFront></div>
    <div class="Card_Rear" id=cardsRear></div>
  </div>
</div>

uj5u.com熱心網友回復：

你也少了一個點 ":scope > Card_Rear"

嘗試委托

function shuffle(array) {
  let currentIndex = array.length,
    randomIndex;

  while (currentIndex != 0) {

    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]
    ];
  }

}
const images$Rear = [{
    name: "rear.1a",
    img: "https://picsum.photos/id/0/367/267",
  },
  {
    name: "rear.1b",
    img: "https://picsum.photos/id/1/367/267",
  },
  {
    name: "rear.2a",
    img: "https://picsum.photos/id/2/367/267",
  },
  {
    name: "rear.2b",
    img: "https://picsum.photos/id/3/367/267",
  },
]





let click4RearImage = document.querySelector("#StartButton");
click4RearImage.addEventListener("click", DisplayRearImage);

function DisplayRearImage() {
  shuffle(images$Rear)
  console.log(images$Rear[0].img)
  let rearImage = document.createElement('img');
  rearImage.alt = images$Rear[0].name
  rearImage.src = `${images$Rear[0].img}`;
  document.querySelector("#cardsRear").appendChild(rearImage);
}


document.querySelector('#cardsRear').addEventListener("click", function(e) {
  const tgt = e.target
  if (tgt.closest('div').classList.contains("Card_Rear")) {
    tgt.classList.toggle('is-flipped')
  }
})

.Card_Rear {
  opacity: 1;
}
.Card_Rear .is-flipped {
  opacity: 0;
}

<div class="flex_container_start-button"> <button type="button" class="btn btn-primary" id="StartButton">Click to Begin</button> </button>
</div>
<div class="flex_container_board" id="Game_Board">
  <div class="Our-Card" id="ourCard">
    <div class="Card_Front" id=cardsFront>Front</div>
    <div class="Card_Rear" id=cardsRear>Rear</div>
  </div>
</div>

標籤：javascript html 图片 切换

上一篇：為什么在Pygame中繪制后第二張影像沒有出現在第一張影像的頂部

下一篇：卸載目的地已存在的檔案：s3://snowflake。使用覆寫選項強制卸載。-Java，SpringBoot