我正在制作星级评级选项。我有一个包含隐藏输入和五个图像的跨度。当其中一个图像悬停在上面时,该图像和左侧的每个兄弟图像都被设置为图像的突出显示版本,并且右边的每个兄弟都会变暗。
<span>
<input type="hidden" value="1" class="starCount">
<img src="star-on.jpg" alt="Rating:1 Star" class="rating"><!--
--><img src="star-off.jpg" alt="Rating:2 Stars" class="rating"><!--
--><img src="star-off.jpg" alt="Rating:3 Stars" class="rating"><!--
--><img src="star-off.jpg" alt="Rating:4 Stars" class="rating"><!--
--><img src="star-off.jpg" alt="Rating:5 Stars" class="rating">
</span>
click: (function(){
// Set the hidden input value to which rating you clicked
$(this).siblings(".starCount:eq(0)").val($(this).index());
}),
mouseover: (function(){
// Highlight the star being hovered + all stars to the left
$(this).attr("src","star-on.jpg");
$(this).prevAll(".rating").attr("src","star-on.jpg");
$(this).nextAll(".rating").attr("src","star-off.jpg");
}),
mouseout:(function(){
// Reset highlighted stars to the value of the hidden input
// Get the position of the hovered element
var stars = parseInt($(this).siblings(".starCount:eq(0)").val());
if($(this).index() != stars){
// Highlight this element and everything to it's left
$(this).siblings(".rating:lt("+(stars-1)+")").attr("src","star-on.jpg");
// Dim everything to the right
/* -- Note this line: It works, but is where my question derives from -- */
$(this).siblings(".rating:eq("+(stars-1)+")").nextAll().attr("src","star-off.jpg");
}
})
我的问题是我必须完成“调光”部分。这适用于[此元素] +以前的兄弟姐妹:
$(this).siblings(".rating:lt("+(stars-1)+")").attr("src","star-on.jpg");
为什么这对以后的所有内容都无效:
$(this).siblings(".rating:gt("+(stars-1)+")").attr("src","star-off.jpg");
我刚注意到在使用GT选择器时我没有解释 无法正常工作。这是我如何重现我的问题。 见http://jsfiddle.net/SNmcB/1/:
答案 0 :(得分:1)
第一位明星的兄弟姐妹是:2 3 4 5
没有gt()选择器可以选择它。
第二位明星的兄弟姐妹是:1 3 4 5 gt参数必须为0。
明星#3
兄弟姐妹:1 2 4 5
需要索引:1
明星#4
兄弟姐妹:1 2 3 5
需要索引:2明星#5
兄弟姐妹:1 2 3 4
需要索引:3所以以下内容应该有效:
if (stars === 1) {
$(this).nextAll().attr("src","star-off.jpg");
} else {
$(this).siblings(".rating:gt("+(stars - 2)+")").attr("src","star-off.jpg");
}