jQuery管理多个星级评分

问题描述：

在我的网站上，我有一个页面，带有褒奖结果，人们可以在那里评分。jQuery管理多个星级评分

在页面上有一个评级列表一切正常，但有多个我通过选择正确的列表（这个）要徘徊有点问题。现在它始终是HTML代码中第一个悬停的列表（如果我先将光标放在第二个评级列表上，则悬停）。

的HTML：

<ol class="rating" data-rating="4"> 
<li class="Arad5fQEnoZlv9E59d"><a title="Super boring" class="rate starOn" id="1">1 star</a></li> 
<li class="Arad5fQEnoZlv9E59d"><a title="Boring" class="rate starOn" id="2">2 stars</a></li> 
<li class="Arad5fQEnoZlv9E59d"><a title="Nice" class="rate starOn" id="3">3 stars</a></li> 
<li class="Arad5fQEnoZlv9E59d"><a title="Cool" class="rate starOn" id="4">4 stars</a></li> 
<li class="Arad5fQEnoZlv9E59d"><a title="Super cool!" class="rate star" id="5">5 stars</a></li> 
<div class="response">Score 4 By 2 ratings</div> 
</ol>

我的javascript的谁也不会做很好的工作的一部分：

$('ol.rating li', this).hover(function(){ 
      var id  = $('a', this).attr('id'); 
      var counter = 1; 
      var salt = $(this).attr('class'); 

      console.log('ol.rating li.'+salt); 

      $('ol.rating li.'+salt).each(function(i){ 
      if (id >= counter) { 
       $('a#'+counter).addClass("starHover"); 
      } else { 
       $('a#'+counter).removeClass("starHover"); 
      } 
      counter++; 
      }); 
    });

希望我的问题是有点清楚:)

谢谢提前！尼克

什么是'this'指的是'$（ 'ol.rating礼'，这一点）'？你也可以添加你的css定义。很难看到预期的行为。 – ryadavilli 2013-02-19 11:22:00

它指的是用户触摸的目录（？），页面上有像上面那样的网格块。 – directory 2013-02-19 11:24:14

答

你的代码工作propertly（我只是删除从第一行this关键字）：http://jsfiddle.net/yAwZz/

要打印类，这是所有<li>元素相同的控制台。这可能是混乱的根源吗？

更新：

您正在使用相同的id多个HTML元素这是从来没有好主意。 id属性必须是唯一元素标识符。

您可以使用.index()和.slice() jQuery方法来简化代码并使其在不使用ids的情况下按预期工作。请注意，我用mouseenter事件，而不是hover广告悬停时呼吁两国的mouseenter和鼠标离开这也是在这种情况下没有必要：

$('ol.rating li').mouseenter(function(){ 
    var $lis = $(this).siblings("li").andSelf(); 
    var id = $(this).index(); 

    $lis.removeClass("starHover"); 
    $lis.slice(0, id + 1).addClass("starHover"); 
});

你可以看到工作的jsfiddle代码：http://jsfiddle.net/yAwZz/5/

http://jsfiddle.net/yAwZz/1/当您添加额外的评级块时，您会看到发生了什么情况 – directory 2013-02-19 11:27:36

@Freshcoat在此小提琴中，由于ID在整个文档中重复，因此HTML无效。你需要确保你的'a'元素的唯一ID – ryadavilli 2013-02-19 11:31:08

你对这个ID是正确的。我会改变他们到课堂上。我想现在可以使用@ryadavilli的解决方案。 – directory 2013-02-19 12:07:39

答

先给类收视率名称不同。例如：

<ol class="rating1" data-rating="4"> 
<li class="Arad5fQEnoZlv9E59d"><a title="Super boring" class="rate starOn" id="1">1 star</a></li> 
<li class="Arad5fQEnoZlv9E59d"><a title="Boring" class="rate starOn" id="2">2 stars</a></li> 
<li class="Arad5fQEnoZlv9E59d"><a title="Nice" class="rate starOn" id="3">3 stars</a></li> 
<li class="Arad5fQEnoZlv9E59d"><a title="Cool" class="rate starOn" id="4">4 stars</a></li> 
<li class="Arad5fQEnoZlv9E59d"><a title="Super cool!" class="rate star" id="5">5 stars</a></li> 
<div class="response">Score 4 By 2 ratings</div> 
</ol> 
<ol class="rating2" data-rating="4"> 
<li class="Arad5fQEnoZlv9E59d"><a title="Super boring" class="rate starOn" id="1">1 star</a></li> 
<li class="Arad5fQEnoZlv9E59d"><a title="Boring" class="rate starOn" id="2">2 stars</a></li> 
<li class="Arad5fQEnoZlv9E59d"><a title="Nice" class="rate starOn" id="3">3 stars</a></li> 
<li class="Arad5fQEnoZlv9E59d"><a title="Cool" class="rate starOn" id="4">4 stars</a></li> 
<li class="Arad5fQEnoZlv9E59d"><a title="Super cool!" class="rate star" id="5">5 stars</a></li> 
<div class="response">Score 4 By 2 ratings</div> 
</ol>

答

我更新了你的代码只使用里，然后从悬停内找出上下文。检查此琴：http://jsfiddle.net/yAwZz/2/

$('li').hover(function(){ 
     console.log("hover"); 
     var id  = $('a', this).attr('id'); 
     var counter = 1; 
     var salt = $(this).attr('class'); 
     // get the context here. 

     var parent = $(this).parent(); 
     console.log('ol.rating li#'+id); 

     // remove the class for all elements by default. 
     $('a').removeClass("starHover"); 

     // use the context here for adding the class 
     $('li.'+salt, parent).each(function(i){ 
     if (id >= counter) { 
      $('a#'+counter, parent).addClass("starHover"); 
     } else { 
      $('a#'+counter, parent).removeClass("starHover"); 
     } 
     counter++; 
     }); 
});

jQuery管理多个星级评分

相关推荐