如何在多個jquery raty系統中控制目標

Question

我正在使用jquery raty在php中進行評級頁面，其中顯示多個評級。除非有一件事，否則它工作正常得分功能和點擊功能正常工作。但我在嘗試爲每個元素設置目標時遇到問題。我想要的是顯示懸停在每顆星上的評分選項。它應該在類div「star_hint」中顯示提示，但事實並非如此。

每個元素顯示在一個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，因爲每個星項目都有一個不同的目標。我試過也返回一個函數內的值，比如score和click，但它不起作用。 就像是：

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

人對如何使這項工作的想法？

Answer 1

可以循環通所有span或div S代表其中raty()方法需要綁定並然後傳遞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'  

}) 
}) 


}); 

Answer 2

HTML

<div class="star" data-score="2.6"></div><span class="hint"></span> 

JS

$(function() { 
    $('div[class^="star"]').each(function(){ 
     $(this).raty({ 
      readOnly:true, 
      score: function() {return $(this).attr('data-score');}, 
      }) 
      $(this).next().text($(this).attr('data-score')); 
     }); 
    });