Question

我正在尝试使用html5和css获得5星评级。

我所做的是，我拍摄了2张图片，其中一张是红色和绿色的星星。

当我们点击星级评级时，

初始星将为红色直到点击的星星它应该变绿。

所以我用onclick更改图片...

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
  {
  element.src="images/1.png";
  }
else
  {
  element.src="images/2.png";
  }
}
</script>


</head>
<body>
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">



</body>
</html>

我现在需要的是，当我点击星级进行评级时，只有第一颗星被改变了。相反，直到我点击的星星应该变色...

我该怎么办？

Answer 1

首先使用jQuery来连接你的事件，使用on属性已经过时了。其次，您有重复的id属性，这些属性无效。最后，您可以使用prevAll()获取所有前面的元素并更新它们。试试这个：

<div class="rating-container">
    <img class="star" src="images/1.png">
    <img class="star" src="images/1.png">
    <img class="star" src="images/1.png">
    <img class="star" src="images/1.png">
    <img class="star" src="images/1.png">
</div>

$(function() {
    $('.rating-container .star').click(function() {
        $('.rating-container .star').prop('src', 'images/1.png');
        $(this).prevAll('.star').addBack().prop('src', 'images/2.png');
    });
});

Example fiddle

请注意，该示例正在更改某些class元素的div，因为我无权访问您的图片，但逻辑相同。

Answer 2

我的最后一种方法是使用一个“星形面具”png图像，其中星星是透明的，在该容器后面是一个div动画到百分比表示的点，我知道效果，你有非常精确的数量

function updateStars() {//Animatestars in Searchresult
    $('.stars').each(function (i){ 
        var el = $(this).find('.countSpan').text();
        var amount = (parseFloat(el) * 2)  * 10 ;
        $('.Newstar_bar').eq(i).animate({'width': amount+'%'},1000,'easeOutQuint');
                console.log('updatedStars with amount : '+amount);
    });   
}

html：

<div class="stars" >
  <div class="Newstar_container" style="top:-5px;">
   <div class="Newstar_background"></div>
   <div class="Newstar_bar"></div>
   <div class="Newstar_wrap"></div>
 </div>
<span class="countSpan" style="display:none">2.3</span>
</div>

我如何使用javascript进行5星评级

2 个答案: