1

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

我所做的是，我拍了两张照片，一张是红色和绿色的星星。

最初星星是红色的，当我们点击星星进行评分时，直到点击的星星应该变成绿色。

所以我使用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>

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

我怎样才能做到这一点？？？

4

2 回答 2

3

首先使用 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');
    });
});

示例小提琴

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

于 2013-10-11T12:41:44.667 回答
0

我的最后一种方法是使用“星星蒙版”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>
于 2013-10-11T12:48:01.707 回答