<div class="recinfotopright">
<ul>
<li data-default-index="0">
<span>
<img src="../img/star1.png">
<img src="../img/star1.png">
<img src="../img/star1.png">
<img src="../img/star1.png">
<img src="../img/star1.png">
</span>
<em class="level"></em>
</li>
</ul>
</div>
// 五星好评
var stars = [
['star2.png', 'star1.png', 'star1.png', 'star1.png', 'star1.png'],
['star2.png', 'star2.png', 'star1.png', 'star1.png', 'star1.png'],
['star2.png', 'star2.png', 'star2.png', 'star1.png', 'star1.png'],
['star2.png', 'star2.png', 'star2.png', 'star2.png', 'star1.png'],
['star2.png', 'star2.png', 'star2.png', 'star2.png', 'star2.png'],
];
$(".recinfotopright li").find("img").hover(function (e) {
var obj = $(this);
var index = obj.index();
if (index < (parseInt($(".recinfotopright li").attr("data-default-index")) - 1)) {
return;
}
var li = obj.closest("li");
var star_area_index = li.index();
for (var i = 0; i < 5; i++) {
li.find("img").eq(i).attr("src", "../img/" + stars[index][i]); //切换每个星星
}
}, function () {})
$(".recinfotopright li").hover(function (e) {}, function () {
var index = $(this).attr("data-default-index"); //点击后的索引
index = parseInt(index);
$(".recinfotopright li:eq(0)").find("img").attr("src", "../img/star1.png");
for (var i = 0; i < index; i++) {
$(".recinfotopright li:eq(0)").find("img").eq(i).attr("src", "../img/star2.png");
}
})
$(".recinfotopright li").find("img").click(function () {
var obj = $(this);
var li = obj.closest("li");
var star_area_index = li.index();
var index1 = obj.index();
li.attr("data-default-index", (parseInt(index1) + 1));
var index = $(".recinfotopright li").attr("data-default-index"); //点击后的索引
index = parseInt(index);
$(".recinfotopright li:eq(0)").find("img").attr("src", "../img/star1.png");
for (var i = 0; i < index; i++) {
$(".recinfotopright li:eq(0)").find("img").eq(i).attr("src", "../img/star2.png");
}
});
Jquery实现五星好评
最新推荐文章于 2021-06-03 06:18:04 发布