学习JavaScript:有没有办法在不使用个人ID的情况下更改一组图像的图像文件

Learning JavaScript: Is there a way to change the image file of a group of images without using individual ids?

本文关键字：图像 情况下 文件 一组 ID 有没有 JavaScript 学习      更新时间：2023-09-26

试图用塔罗牌程序自学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>

关于如何使用现有代码执行此操作，将对图像的引用传递到 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中，这是不好的做法。您应该单独绑定到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时是困难的概念。然而，它们非常重要，如果你现在能学习它们，你将为未来做好准备。

这是一个快速片段，对于路过的人来说可能是一个很好的开始。

您必须在78张卡之间进行选择。甲板可以无限制地洗牌。选择的牌将从套牌中丢弃。当选择了 5 张牌时，它们一起被显示出来。

选择后，将从此存储库中提取卡：

https://github.com/mcnuttandrew/tarot-deck

let cards = [
  '00 The fool.svg',
  '01 The magician.svg',
  '02 The high priestess.svg',
  '03 The empress.svg',
  '04 The emperor.svg',
  '05 Hierophant.svg',
  '06 The lovers.svg',
  '07 The chariot.svg',
  '08 Strength.svg',
  '09 The hermit.svg',
  '10 Coins.svg',
  '10 Cups.svg',
  '10 Swords.svg',
  '10 Wands.svg',
  '10 Wheel of fortune.svg',
  '11 Justice.svg',
  '12 The hanged man.svg',
  '13 Death.svg',
  '14 Temperance.svg',
  '15 The Devil.svg',
  '16 The Tower.svg',
  '17 The star.svg',
  '18 The moon.svg',
  '19 The sun.svg',
  '20 Judgement.svg',
  '21 The world.svg',
  '2 Coins.svg',
  '2 Cups.svg',
  '2 Swords.svg',
  '2 Wands.svg',
  '3 Coins.svg',
  '3 Cups.svg',
  '3 Swords.svg',
  '3 Wands.svg',
  '4 Coins.svg',
  '4 Cups.svg',
  '4 Swords.svg',
  '4 Wands.svg',
  '5 Coins.svg',
  '5 Cups.svg',
  '5 Swords.svg',
  '5 Wands.svg',
  '6 Coins.svg',
  '6 Cups.svg',
  '6 Swords.svg',
  '6 Wands.svg',
  '7 Coins.svg',
  '7 Cups.svg',
  '7 Swords.svg',
  '7 Wands.svg',
  '8 Coins.svg',
  '8 Cups.svg',
  '8 Swords.svg',
  '8 Wands.svg',
  '9 Coins.svg',
  '9 Cups.svg',
  '9 Swords.svg',
  '9 Wands.svg',
  'Ace Coins.svg',
  'Ace Cups.svg',
  'Ace Swords.svg',
  'Ace Wands.svg',
  'King Coins.svg',
  'King Cups.svg',
  'King Swords.svg',
  'King Wands.svg',
  'Knight Coins.svg',
  'Knight Cups.svg',
  'Knight Swords.svg',
  'Knight Wands.svg',
  'Princess Coins.svg',
  'Princess Cups.svg',
  'Princess Swords.svg',
  'Princess Wands.svg',
  'Queen Coins.svg',
  'Queen Cups.svg',
  'Queen Swords.svg',
  'Queen Wands.svg'
];
let hats = [], hhh = 1;
cards.forEach((e) => {
  hats.push({content: `<h${hhh}><span data-card="${e}" class="back"></span></h${hhh}>`});
  (hhh >= 6) ? hhh = 1 : hhh++
})

let timer;
function loop5(){
  let i = 0
  clearInterval(timer)
  timer = setInterval(function(){
    shuffle()
    if (i >= 20){
      clearInterval(timer)
    }
    i++
  }, 200)
}
loop5()
function shuffle(){
   hats.sort(() => Math.random() - 0.5)
   out.innerHTML = hats.map(e => e.content).join("")
}
let count = 0;
out.addEventListener("click", (e) => {
  if (e.target.dataset.card && count < 5){
    cards.splice(e.target.dataset.card, 1);
    user.innerHTML += `<img class="blur" src="https://raw.githubusercontent.com/mcnuttandrew/tarot-deck/9e885d3608454a03f275c2c3375e9e9f45788b22/svgs/${e.target.dataset.card}">`
    e.target.outerHTML = ""
    document.querySelectorAll(".user > span")[count++].className = ""
    k(3,233,100); k(1,603,200);
  }
  if (count === 5){
    document.querySelectorAll("#user > img").forEach((e) => {
      e.className = ""
    })
    k(10,1233,100); k(3,1603,500);
    count++;
  }
})
// gain, frequency, duration
let a = new AudioContext()
function k(w,x,y){
  //console.log("Gain:"+w, "Hz:"+x, "ms:"+y)
  v = a.createOscillator()
  u = a.createGain()
  v.connect(u)
  v.frequency.value = x
  v.type = "square"
  u.connect(a.destination)
  u.gain.value = w * 0.01
  v.start(a.currentTime)
  v.stop(a.currentTime + y *0.001)
}
body {background: midnightblue; color: antiquewhite;}
div, span {display: flex }
.user > span { max-width: 18rem; padding: 0 0 0 0.5rem; }
button {cursor: pointer }
.back {display: table-cell; background: black; height: 2.4em; width: 2.6em; border-radius: 0.2em; border: 2px blue solid}
.back:hover {filter: invert(0.2); cursor: pointer}
.out {display: flex;justify-content: center;flex-direction: row;}
.user {  display: grid;
  height: 100px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;padding: 0 0rem 0 2rem;}
.card {height: 2.4em; width: 2.6em; }
img {width: 16vw }
.blur {filter: blur(10px);}
<button onclick="loop5()">Shuffle cards</button> <b>Choose 5 cards</b>
<div id="out"></div>
<div class="user">
    <span class="">What is happening at the moment?</span>
    <span class="blur">How can I weather it easily and with grace?</span>
    <span class="blur">What is the lesson?</span>
    <span class="blur">What is leaving at this time?</span>
    <span class="blur">What is arriving at this time?</span>
</div>
<div id="user" class="user"></div>

提示：整页，问一个问题，不要每天用太多。热忱。

相关文章：