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

jQuery select all elements with same class name

本文关键字：元素 选择 jQuery 同类      更新时间：2023-09-26

我正在我的网站上实施一个评级系统，并尝试在用户将鼠标悬停在任何评级星上时显示总分。问题是jQuery选择只是选择第一组输入元素。因此，在下面的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);
    });

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

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

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

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

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

你能试试吗

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

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

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

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

以避免意外行为。

相关文章：