如何在 Javascript 中从两个图像中获取和设置第二个图像的属性？答案

【问题标题】：How to Get and Set Attribute of a second image from two in Javascript?如何在 Javascript 中从两个图像中获取和设置第二个图像的属性？
【发布时间】：2022-07-11 23:21:51
【问题描述】：

我有一个包含两个骰子图像的 HTML 代码。我实现了使用document.querySelector("img").setAttribute("src", "images/dice1") 更改第一个骰子图像的方法，每个条件都包括其各自的骰子。但这仅适用于单个 Dice Image。

所以现在我想对第二张图片做同样的事情。但是 setAttribute 没有设置第二张图片的属性。那我现在能做什么？

这是我的 HTML 代码-

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dice Game Website</title>

<!-- fonts Section -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Style+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
  </head>
  <body>


    <!-- HomePage code -->
    <div class="container">
      <h1>Refresh Page</h1>
      <div class="player">
        <p>Player1</p>
        <img class="img1" src="images\dice1.png" alt="">
      </div>
      <div class="player">
        <p>Player2</p>
        <img class="img2" src="images\dice1.png" alt="">
      </div>
    </div>


    <script src="index.js" charset="utf-8"></script>
  </body>
</html>

这里是 Javascript

var randomDice1 = Math.floor((Math.random()*6)+1);
var randomDice2 = Math.floor((Math.random()*6)+1);

//for first Dice Image
if (randomDice1===1){
  document.querySelector("img").setAttribute("src", "images/dice1.png");
}
else if (randomDice1===2){
  document.querySelector("img").setAttribute("src", "images/dice2.png")
}
else if (randomDice1===3){
  document.querySelector("img").setAttribute("src", "images/dice3.png")
}
else if (randomDice1===4){
  document.querySelector("img").setAttribute("src", "images/dice4.png")
}
else if (randomDice1===5){
  document.querySelector("img").setAttribute("src", "images/dice5.png")
}
else{
  document.querySelector("img").setAttribute("src", "images/dice6.png")
}


//for Second Dice Image

if (randomDice2===1){
  document.querySelector("img").setAttribute("src", "images/dice1.png");
}
else if (randomDice2===2){
  document.querySelector("img").setAttribute("src", "images/dice2.png")
}
else if (randomDice2===3){
  document.querySelector("img").setAttribute("src", "images/dice3.png")
}
else if (randomDice2===4){
  document.querySelector("img").setAttribute("src", "images/dice4.png")
}
else if (randomDice2===5){
  document.querySelector("img").setAttribute("src", "images/dice5.png")
}
else{
  document.querySelector("img").setAttribute("src", "images/dice6.png")
}

那么第二个骰子该怎么办。我知道有很多方法可以编写改变骰子的代码，但我想知道这个解决方案。谢谢。

【问题讨论】：

document.querySelectorAll()
How much research effort is expected of Stack Overflow users?
这能回答你的问题吗？ Javascript Foreach loop over multiple selector elements

标签： javascript html attributes javascript-objects project

【解决方案1】：

假设您只有 2 张图片。为什么不使用类选择器而不是元素选择器？ document.querySelector('.img1') 或 document.querySelector('.img2')?

var randomDice1 = Math.floor((Math.random()*6)+1);
var randomDice2 = Math.floor((Math.random()*6)+1);

document.querySelector(".img1").setAttribute("src", `images/dice${randomDice1}.png`);

document.querySelector(".img2").setAttribute("src", `images/dice${randomDice2}.png`);

编辑：如果你不明白上面的字符串模板语法，它类似于以下。

var randomDice1 = Math.floor((Math.random()*6)+1);
var randomDice2 = Math.floor((Math.random()*6)+1);

document.querySelector(".img1").setAttribute("src", "images/dice" + randomDice1 + ".png");

document.querySelector(".img2").setAttribute("src", "images/dice" + randomDice2 + ".png");

【讨论】：