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

Question

我在我的网站上实现了评分系统，并尝试在用户将鼠标放在任何评级星上时显示总分。问题是jQuery select只选择第一组输入元素。因此，在下面的HTML，它只能选择与“AX1”到“AX5”的ID元素。我正在试图做的是通过每一个“星”输入组件迭代，请检查如果图像是一个充满星（有中每个元素的鼠标悬停事件从空心星翻转图像以充满明星的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

返回false从功能。每个（）调用内终止该每个循环。您所写的代码将在第一次检测到空星时终止。

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

我也同意你应该修改你的选择器。 “input.stars”是一个一般比“输入[CLASS =‘明星’]”，因为一个更好的选择：

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

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

Answer 2

你能尝试用

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

Answer 3

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); 
}); 

迈克·爱德华兹是指出你停止尽快计数为你打一个空的明星完全正确的。实际上它只返回的是当前函数，和each()将继续执行。好吧，each()只会返回false停止执行，如this example所示。我所概述的功能计算所有非空星，并且采用了更好的选择。

我注意到，在分数聚合中，你只能抓住输入元素的星星，这很有道理;然而，在鼠标悬停事件，你把它应用到具有.stars类中的任何元素。这也许是故意的，让他们可以将鼠标放在一个div，说：“展会明星”什么的，但如果没有，你不妨改变，要

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

，以避免意外的行为。