Question

我正在尝试实施一个简单的评级系统，就像你已经看过一千次。我从1到5有5个等级“星星”。当一颗星被碾过时，该星被改为“正”图像，所有低星也应该被改变。因此，当鼠标悬停在“3”上时，图像1到3会突出显示。你知道我的意思。无论如何，下面的代码似乎只是想突出显示被鼠标悬停的图像。

jQuery的：

        $(document).on("mouseover", "input.ranking", function () {
        $(this).attr("src", "img/rss_orb_green.png");
        $(this).prevAll("src", "img/rss_orb_green.png");
        $(this).nextAll("src", "img/rss_orb_light_gray.png");
        var score = 0;
        $("input.ranking").each(function (index, element) {
            if ($(element).attr("src") == "img/rss_orb_green.png") {
                    score = score + 1;
            };
        });

HTML：

<div style="width: 770px; float: left;">

<input name="ctl00$MainContent$skill1" class="ranking" id="MainContent_skill1" style="width: 15px; height: 15px;" type="image" src="img/rss_orb_green.png" state="img/rss_orb_green.png" rank="1">

<input name="ctl00$MainContent$skill2" class="ranking" id="MainContent_skill2" style="width: 15px; height: 15px;" type="image" src="img/rss_orb_green.png" state="img/rss_orb_green.png" rank="2">

<input name="ctl00$MainContent$skill3" class="ranking" id="MainContent_skill3" style="width: 15px; height: 15px;" type="image" src="img/rss_orb_light_gray.png" state="img/rss_orb_light_gray.png" rank="3">

<input name="ctl00$MainContent$skill4" class="ranking" id="MainContent_skill4" style="width: 15px; height: 15px;" type="image" src="img/rss_orb_light_gray.png" state="img/rss_orb_light_gray.png" rank="4">

<input name="ctl00$MainContent$skill5" class="ranking" id="MainContent_skill5" style="width: 15px; height: 15px;" type="image" src="img/rss_orb_light_gray.png" state="img/rss_orb_light_gray.png" rank="5">

Answer 1

您没有正确使用prevAll和nextAll。我还建议将$(this)存储在变量

中

$(this).prevAll().attr("src", "img/rss_orb_green.png");
$(this).nextAll().attr("src", "img/rss_orb_light_gray.png");

jQuery PrevAll不起作用

1 个答案: