Как управлять мишенью в системе с несколькими 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 
    } 
}); 

Я не могу использовать идентификатор для цели, потому что каждая звезда элемент имеет другой цели. Я попытался также вернуть значение внутри функции, например, оценка и щелчок, но это не сработало. Как что:

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

Любое имеет представление о том, как сделать эту работу?

Answer 1

Вы можете цикл через все span или div с, для которых 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')); 
     }); 
    });