javascript - 学习 JavaScript : Is there a way to change the image file of a group of images without using individual ids?

Question

尝试通过我计划在学习过程中构建的塔罗牌程序自学 JavaScript。

现在我正在尝试弄清楚如何在用户点击卡片时将卡片的图像从背面更改为正面，并且我正在尝试使用 JavaScript 完成这一切。

到目前为止，我已经弄清楚了如何用卡片的想法更改 img src，但它只更改了第一个。有没有一种方法可以做到这一点而不必为每张卡编写一个单独的函数？还是不使用唯一 ID？

我已经研究了几个小时。我卡住了。

<p align="center">

<img id="card" onclick="someFunc()" src="img-tarot-card-back-001.jpg">
<img id="card" onclick="someFunc()" src="img-tarot-card-back-001.jpg">
<img id="card" onclick="someFunc()" src="img-tarot-card-back-001.jpg">
<img id="card" onclick="someFunc()" src="img-tarot-card-back-001.jpg">
<img id="card" onclick="someFunc()" src="img-tarot-card-back-001.jpg">

</p>

<script>

   function someFunc() {
      document.getElementById('card').src="img-tarot-card-front-001.jpg";
   }

</script>

Answer 1

就如何使用现有代码执行此操作而言，将对图像的引用传递到 HTML 中的函数中:

<img onclick="someFunc(this)" src="img-tarot-card-back-001.jpg">
                       ^^^^
                       "this" references the current image element

注意:我删除了您的 id 属性，因为 ID 在文档中必须是唯一的。

然后更新您的函数以使用该实例:

function someFunc(card) {
    card.src="img-tarot-card-front-001.jpg";
} // Fixed this ending brace too

但是，由于您只是在学习，所以您应该从正确的道路开始。尽量不要将 Javascript 放在 HTML 中，这是不好的做法。您应该单独绑定(bind)到 Javascript 中的那些元素，例如:

document.querySelector("img") // Grab all <img> elements
    .addEventListener("click", function(e) { // Listen for a "click" event
        var clickedImage = e.target; // The clicked image will be stored in the target
        clickedImage.src = "img-tarot-card-front-001.jpg"
    });

现在您的 HTML 是干净的并且没有 Javascript:

<img src="img-tarot-card-back-001.jpg">

我用了querySelector和 addEventListener此处并非所有浏览器都支持，并且在学习 Javascript 时是困难的概念。然而，它们非常重要，如果您现在能够学习它们，您将为自己的 future 做好准备。