如何将切换功能应用于包含多个图像的 div 中的 div onclick 中的一个图像？

Question

我在其他图像之上有多个图像。 在图像上单击一个切换功能应该发生，使顶部图像的不透明度为 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>

Answer 1

你的":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>