jquery - 如何在多jqueryraty系统中控制目标

Question

我正在使用jqueryraty在php中做一个评级页面，其中显示多个评级。除非有一件事，否则它工作正常。评分功能、点击功能正常。但我在尝试为每个元素设置目标时遇到问题。我想要的是将鼠标悬停在每颗星星上时显示评级选择。它应该在类为“star_hint”的 div 中显示提示，但事实并非如此。

每个元素都显示在 div 中，如下所示:

<div class="span4">
   <h4>First valoration</h4>
   <div class="star" data-number="3"></div>                                         
   <input type="hidden" class="score_value" />                                  
   <div class="star_hint"></div>
</div>

<div class="span4">
   <h4>Second valoration</h4>
   <div class="star" data-number="4"></div>                                         
   <input type="hidden" class="score_value" />                                  
   <div class="star_hint"></div>
</div>
etc....

脚本是这样的:

$('.star').raty({
    target: $(this).next('.star_hint'),
    score: function() {
        return $(this).attr('data-number');  // set default value 
    },
    click: function(score) {
        $(this).next().val(score);  // save clicked value in hidden input
        GetAverageNote();  // calculates average note from all ratys
    }
});

我不能使用 id 作为目标，因为每个星星项目都有不同的目标。我也尝试在函数中返回值，就像得分和点击一样，但它不起作用。 像这样:

target: function() {
    $(this).next('.star_hint');
   }

有人知道如何实现这项工作吗？

Answer 1

您可以循环遍历需要绑定(bind) raty() 方法的所有 span 或 div，然后传递 tid 作为变量来设置raty({target:tid})

Rate <span id="star_xxx" data-number="3" rel="#hint_xxx" ></span>  <span  id="hint_xxx">   </span>

$( document ).ready(function() {
$('span[id^="star"]').each(function(){
    var tid = $(this).attr('rel'); 
    $(this).raty({
        target : tid ,
        starOff : '/img/star-off.png', 
        starOn : '/img/star-on.png'     

}) 
}) 


});