javascript - 将图像的“src”属性更改为另一个图像文件？

Question

我的这部分作业是指示我将一组星形图像的 src 属性更改为另一个图像文件。

我尝试了许多removeAttribute()和setAttribute()的组合，但没有运气。我可能在这里想错了路。

function lightStars () {
   var starNumber = e.target.alt;
   var stars = document.querySelectorAll("span#stars img");
for (var i = 0; i < starNumber; i++) {
   stars.setAttribute("src", "bw_star2.png");
}
} 

HTML 代码：

<label id="ratingLabel" for="rating">Rate this title
           <span id="stars">
           <img src="bw_star.png" alt="1" />
           <img src="bw_star.png" alt="2" />
           <img src="bw_star.png" alt="3" />
           <img src="bw_star.png" alt="4" />
           <img src="bw_star.png" alt="5" /></span>
           <input type="text" name="rating" id="rating" readonly value="" />
</label>

此函数的目的是当用户将鼠标指针移到星形图像上时为星形着色，以反映用户对图书的评分。

我希望我能正确解释这一点。

标签： javascripthtml

Answer 1

如果我正确理解您的代码，我认为您只是错过了访问每个 stars 数组位置：

function lightStars () {
    var starNumber = e.target.alt;
    var stars = document.querySelectorAll("span#stars img");
    for (var i = 0; i < starNumber; i++) {
        stars[i].setAttribute("src", "bw_star2.png");
    }
}