Question

我有一个img，span包含多个星级图片。我正在尝试创建一个on.Click函数，该函数会在点击时更改src的{{1}}。不幸的是，我认为我做错了。

＆＃13;

img

＆＃13;

$(document).ready(function() {
      var starRating

      $('.rating').on({
          'click': function() {
            $('.rating').attr('src', 'second.jpg');

          });
      });

＆＃13;

Answer 1

您的代码中存在多个语法错误。例如，要绑定click事件侦听器，语法应为$(selector).on("click", function() {...，而不是您编写它的方式。

此外，您可以选择使用.rating来监听点击事件的特定图片，而不是选择.rating > img来监听点击事件。

最后，$('.rating').attr('src',...无法正常工作，因为.rating指向某个范围，而该范围没有src属性。要在点击的图片上设置src，您只需使用$(this).attr('src',...进行设置即可。

＆＃13;

$(document).ready(function() {
  var starRating

  $('.rating > img').on('click', function() {
      $(this).attr('src', '//placehold.it/50/ffff00');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="img">
  
  <span class="rating">
    <img src="//placehold.it/50/00ff00">
    <img src="//placehold.it/50/00ff00">
    <img src="//placehold.it/50/00ff00">
    <img src="//placehold.it/50/00ff00">
    <img src="//placehold.it/50/00ff00">
  </span>
</div>

＆＃13;

更新

为了让主演工作，即在给定图像之前选择所有图像，当点击图像时，您可以使用jQuery的.prevAll。另外，要重置给定图像后出现的图像的src值，可以使用.nextAll。

＆＃13;

$(document).ready(function() {
  var starRating

  $('.rating > img').on('click', function() {
    $(this).prevAll().attr('src', '//placehold.it/50/ffff00');
    $(this).attr('src', '//placehold.it/50/ffff00');
    
    // Set other images to original one.
    $(this).nextAll().attr("src", "//placehold.it/50/00ff00");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="img">

  <span class="rating">
    <img src="//placehold.it/50/00ff00">
    <img src="//placehold.it/50/00ff00">
    <img src="//placehold.it/50/00ff00">
    <img src="//placehold.it/50/00ff00">
    <img src="//placehold.it/50/00ff00">
  </span>
</div>

＆＃13;

Answer 2

您还可以使用 FontAwesome 图标而不是图片，您只需要包含CDN，然后为class标记提供某个<i>名称：

<script src="https://use.fontawesome.com/c6435311fd.js"></script>
<i class="fa fa-star"><i>

现在回答您的问题，我建议您先使用以下语法之一处理click事件：

$(".fa-star").on("click",function(){/*DoYourStuffsHere*/});
$(".fa-star")click(function(){/*DoYourStuffsHere*/});

之后，我们应该实现改变星星颜色的代码。为此，我的想法是使用.index() jQuery函数获取被点击元素的index，接下来我们将更改color索引在{{1}之间的元素和点击的索引：

另一个var index=$(this).index(); for(var i=0;i<=index;i++) { $(".fa-star:eq("+i+")").css("color","yellow"); }将重置具有loop和最后一个元素索引之间索引的元素的颜色。

clickedIndex+1

最后，这是一个代码片段，说明我所说的所有内容：

      for(var i=index+1;i<$(".fa-star").length;i++)
      {
        $(".fa-star:eq("+i+")").css("color","black");
      }

$(".fa-star").on("click",function(){
var index=$(this).index();
  for(var i=0;i<=index;i++)
  {
    $(".fa-star:eq("+i+")").css("color","yellow");
  }
for(var i=index+1;i<$(".fa-star").length;i++)
  {
    $(".fa-star:eq("+i+")").css("color","black");
  }
});

Answer 3

如果我理解你正在努力完成的事情，我会这样做：

<div id="img">
    <img src="img.png">
    <span class="rating">
        <img id="star1" src="staroff.png">
        <img id="star2" src="staroff.png">
        <img id="star3" src="staroff.png">
        <img id="star4" src="staroff.png">
    </span>
</div>

然后JS：

$(document).ready(function() {
    var starRating = 0;

    $('.rating img').click(function(e) {
        starRating = parseInt(e.target.id.substring(4));

        for (var i = 1; i <= starRating.length; i++) {
            $('#star'+i).attr('src', 'staron.png')
        }
    });
});

或许我完全误解了。

Jquery Img星级

3 个答案:

更新