javascript - 多次显示同一图像。使用 JQuery 一次只更改一个

Question

我在页面上多次显示灰色星形或蓝色星形的图像。当我点击灰色星星时，它应该变成蓝色。当我点击蓝色星星时，它应该变成灰色。现在，当我点击一颗星星时，它会改变所有星星。我如何一次只更改一张图片？

这是在我的 root.html.erb 中

<img class="star-pic" src="/assets/star-gray.png">

这是在我的 javascript/application.js 中

$(document).ready(function(){

  function changeStar(){
    if($(".star-pic").attr("src") == "/assets/star-gray.png"){
      $(".star-pic").attr("src", "/assets/star-blue.png")
    }
    else{
      $(".star-pic").attr("src", "/assets/star-gray.png")
    }
  }

  $(".star-pic").on("click", changeStar)

})

如有任何建议，我们将不胜感激。谢谢。

Answer 1

在您的函数 changeStar() 中，您将在单击任何图像时选择所有图像并因此更改所有图像。使用 $(this) 选择被点击的元素并仅更改它。

$(document).ready(function() {
  function changeStar() {
    if ($(this).attr("src") == "/assets/star-gray.png") {
      $(this).attr("src", "/assets/star-blue.png")
    } else {
      $(this).attr("src", "/assets/star-gray.png")
    }
  }

  $(".star-pic").on("click", changeStar)
})