3

我正在我的网站上实施评分系统，并尝试在用户将鼠标悬停在任何评分星上时显示总分。问题是 jQuery 选择只选择第一组输入元素。因此，在下面的 html 中，它只选择 id 为“ax1”到“ax5”的元素。我想要做的是遍历每个“星”输入元素，检查图像是否是填充星（每个元素的 mouseover 事件中有 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);
    });
4

3 回答 3

9

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

试着做一个console.log($("input[class='stars']").length)看看你得到了多少。

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

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

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

于 2013-10-16T23:15:48.883 回答
2

你能试试吗

      $(".stars").each(function (index, element) {
        // element == this
        if ($(this).attr("src") == "style/EmptyStar.png") {
            return false;
        }
        else {
            score = score + 1;
        };
    });
于 2013-10-16T23:10:41.037 回答
1

JSFiddle 示例

尝试这个：

$(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）完全正确地指出，一旦您击中一颗空星，您就会停止计数。 实际上它只是从当前函数中返回，并且each()会继续执行。好的，each()只有在您返回时才会停止执行false，如本例所示。我概述的功能计算所有非空星，并使用更好的选择器。

我注意到在分数聚合中，您只获取作为输入元素的星星，这是有道理的；.stars但是，在 mouseover 事件中，您将其应用于具有该类的任何元素。也许这是故意的，以便他们可以将鼠标悬停在div“显示星星”或其他内容上，但如果不是，您可能希望将其更改为

$(document).on("mouseover", "input.stars", function () {

以避免意外行为。

于 2013-10-16T23:17:22.790 回答