Question

我正在我的网站上实施评级系统，并尝试在用户将鼠标悬停在任何评级星上时显示总分。问题是jQuery select只选择第一组输入元素。所以，在下面的html中，它只选择id为“ax1”到“ax5”的元素。我要做的是遍历每个“星”输入元素，检查图像是否是填充星（每个元素的鼠标悬停事件中有javascript将图像从空星翻转到填充星），如果它是一个填充的星，则分数会增加。同样，问题在于只计算第一组“星星”。

HTML：

            <div style="margin: 20px 0 0 0; float: left;">
            <div class="divStars" style="width: 130px; float: left;">
                <input type="image" name="ctl00$MainContent$ax1" id="MainContent_ax1" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$ax2" id="MainContent_ax2" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$ax3" id="MainContent_ax3" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$ax4" id="MainContent_ax4" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$ax5" id="MainContent_ax5" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />

            </div>
            <div style="margin-top: 3px; width: 600px; float: left;">
                <span>axs</span>
            </div>
        </div>
        <div style="margin: 20px 0 0 0; float: left;">
            <div class="divStars" style="width: 130px; float: left;">
                <input type="image" name="ctl00$MainContent$bx1" id="MainContent_bx1" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$bx2" id="MainContent_bx2" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$bx3" id="MainContent_bx3" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$bx4" id="MainContent_bx4" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$bx5" id="MainContent_bx5" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            </div>
            <div style="margin-top: 3px; width: 600px; float: left;">
                <span>bx blah blah</span>
            </div>
        </div>

使用Javascript：

        $(document).on("mouseover", ".stars", function () {
        var score = 0;
        $("input[class='stars']").each(function (index, element) {
            // element == this
            if ($(element).attr("src") == "style/EmptyStar.png") {
                return false;
            }
            else {
                score = score + 1;
            };
        });
        debugger;
        $("#MainContent_lblScore").val(score);
    });

Answer 1

从.each（）调用内的函数返回false会终止每个循环。您编写的代码将在第一次检测到空星时终止。

尝试执行console.log($("input[class='stars']").length)以查看您获得的数量。

我也同意你应该修改你的选择器。 “input.stars”通常是比“input [class ='stars']”更好的选择器，因为：

1）它将与<input class="stars anotherClass">匹配，但您的选择器不会

2）浏览器通常可以更快地选择按类选择的元素。从技术上讲，您是按类选择，但是您使用的属性语法可能不会触发选择引擎的优化部分。

Answer 2

JSFiddle Example

试试这个：

$(document).on("mouseover", ".stars", function () {
    var score = 0;
    $("input.stars").each(function (index, element) {
        // element == this
        //if the star is not empty, add it to the score
        if ($(element).attr("src") != "style/EmptyStar.png") {
            score = score + 1;
        };
    });
    debugger;
    $("#MainContent_lblScore").val(score);
});

~~Mike Edwards完全正确地指出，一旦你击中一颗空星，你就会停止计数。~~ ~~实际上它只会返回当前函数，而{{1}将继续执行。~~好的，each()只会在您返回each()时停止执行，如this example所示。我概述的函数计算所有非空星，并使用更好的选择器。

我注意到在分数聚合中你只抓住作为输入元素的星星，这是有意义的;但是，在mouseover事件中，您将其应用于具有false类的任何元素。也许这是故意的，这样他们就可以将鼠标移到.stars上，然后说出＆＃34;显示星星＆＃34;什么的，但如果没有，你可能希望将其改为

div

以避免意外行为。

Answer 3

你可以试试

吗？

      $(".stars").each(function (index, element) {
        // element == this
        if ($(this).attr("src") == "style/EmptyStar.png") {
            return false;
        }
        else {
            score = score + 1;
        };
    });

jQuery选择具有相同类名的所有元素

3 个答案: