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

我在我的网站上实现了一个评分系统，并试图在用户将鼠标移到任何一个评分星上时显示总分。问题是jqueryselect只选择了第一组输入元素。因此，在下面的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>

你能试一下吗

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

---

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

尝试执行

console.log（$（[input[class='stars']]）.length）

以查看您得到的数量

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

1） 它将匹配

，但您的选择器不会匹配

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

试试这个：

$(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

时才会停止执行，如中所示。我概述的函数计算所有非空星，并使用更好的选择器

我注意到，在分数聚合中，您只获取作为输入元素的星星，这是有意义的；但是，在mouseover事件中，可以将其应用于具有

.stars

类的任何元素。也许这是故意的，这样他们就可以将鼠标移到一个写着“Show stars”的div上，如果不是这样，你可以将其改为

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

---

为了避免意外行为。

在这里尝试过，似乎对我来说都很有用……你确定这就是问题所在吗？我给你的功能正常吗？我必须知道啊！没错，迈克。我用“return false；”终止循环。我将“if”改为肯定的“if”，检查“FilledStar.png”，并删除了“returnfalse”，这就成功了。非常感谢！非常感谢。这个回复和上面迈克的回复一起解决了这个问题。

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