如何在包含多个图像的 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>