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

时间:2013-10-16 23:02:31

标签: javascript jquery html

我正在我的网站上实施评级系统,并尝试在用户将鼠标悬停在任何评级星上时显示总分。问题是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);
    });

3 个答案:

答案 0 :(得分:7)

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

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

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

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

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

答案 1 :(得分: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完全正确地指出,一旦你击中一颗空星,你就会停止计数。 实际上它只会返回当前函数,而{{1}将继续执行。好的,each()只会在您返回each()时停止执行,如this example所示。我概述的函数计算所有非空星,并使用更好的选择器。

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

div

以避免意外行为。

答案 2 :(得分:0)

你可以试试

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