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)
})

Answer 2

您正在设置点击事件，以便在点击任何内容时修改所有.star-pic元素的样式：

$(".star-pic").attr("src", "/assets/star-blue.png")

这会更改JQuery包装集的所有成员的src属性。

您只想修改被点击的那个，这样您就应该写：

$(this).attr("src", "/assets/star-blue.png")

仅影响被点击的那个。

但是，除此之外，如果您完全摆脱img元素并且只使用div（或span）元素，那么您的代码可以大大减少并且解决方案会大大简化通过CSS类中的成员身份设置background-image。然后，您只需要切换该类成员资格。

$(function(){
  function changeStar(){
    // Use $(this) to get a reference to just the element being clicked as a JQuery object
    // Simply toggle the use of the greyStar class to toggle the image shown
    $(this).toggleClass("greyStar");
  }

  $(".star-pic").on("click", changeStar)
});

.star-pic {
  width:50px;
  height:50px;
  background-size:cover;
  /* All elements default to showing a blue star */
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/9/98/Human-emblem-star-blue-128.png");
  display:inline-block;
}

/* But some elements are coded in the HTML to override blue and show grey from the start */
.greyStar {
  background-image:url("http://www.dyson.com/airtreatment/humidifiers/am10/am10-white-silver/medialibrary/Reviews/Grey-star.ashx");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="star-pic greyStar"></span>
<span class="star-pic"></span>
<span class="star-pic greyStar"></span>
<span class="star-pic"></span>
<span class="star-pic greyStar"></span>
<span class="star-pic"></span>

Answer 3

你应该在星星上指定一个点击功能，并使用'this'

更改相应的星号

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

Answer 4

您可以使用以下代码。

<!DOCTYPE html>
<html>
<head>
  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

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



<script>
$(document).ready(function(){
  var clickedShape = $(this);
  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)

})

</script>

</body>
</html>

多次显示相同的图像。使用JQuery

4 个答案: