-->

如何控制目标多jQuery的RATY系统(how to control target in a mu

2019-10-18 00:23发布

我使用jQuery RATY在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:

可以循环通所有的spandiv 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'));
        });
    });


文章来源: how to control target in a multiple jquery raty system