1

我是 jquery 的新手。我想在具有相同 id 的页面中多次使用此星级（输入）字段（因为它会变成动态的）。请让我知道我是如何做到这一点的。

jsfiddle：http: //jsfiddle.net/9xrkr/

<script src="http://www.radioactivethinking.com/rateit/src/jquery.rateit.js"></script>
<input type="range" min="0" max="5" value="0" step="1" id="backing1">   
<div class="rateit" id="rateitHover" data-rateit-backingfld="#backing1" data-rateit-step="1" > 
    <span class="tooltip" style="float:right; padding-left:10px;"></span>
</div>

<script>

var tooltipvalues = ['Bad', 'Poor', 'Average', 'Good', 'Excellent'];
var valueToDisplay

$("#rateitHover").bind('over', function (event, value) {
    $('.tooltip').text(tooltipvalues[value - 1]);
});

$("#rateitHover").bind('reset', function () {
    $('.tooltip').text(''); 
    $('#rateitHover').rateit('value')
});

$("#rateitHover").bind('rated', function (event, value) {
    $('.tooltip').text('R: ' + tooltipvalues[value - 1]);
});

$('#rateitHover').bind('mouseleave', function() {
    var v = $('#rateitHover').rateit('value');
    if (v == 0) {
        $('.tooltip').html('');
    } else {
        $('.tooltip').html('R: ' + tooltipvalues[v - 1]);
    }
});


</script>
4

2 回答 2

2

您必须使用类（不是元素的唯一 ID）

尝试这个：

HTML

<input type="range" min="0" max="5" value="0" step="1" id="backing1">
<input type="range" min="0" max="5" value="0" step="1" id="backing2">

<div class="rateit" id="rateitHover1" data-rateit-backingfld="#backing1" data-rateit-step="1" > 
    <span class="tooltip" style="float:right; padding-left:10px;"></span>
</div>

<div class="rateit" id="rateitHover2" data-rateit-backingfld="#backing2" data-rateit-step="1" > 
    <span class="tooltip" style="float:right; padding-left:10px;"></span>
</div>

JAVASCRIPT

var tooltipvalues = ['Bad', 'Poor', 'Average', 'Good', 'Excellent'];
var valueToDisplay

$(".rateit").bind('over', function (event, value) {
    $(this).find('.tooltip').text(tooltipvalues[value - 1]);
});

$(".rateit").bind('reset', function () {
    $(this).find('.tooltip').text(''); 
    $(this).rateit('value')
});

$(".rateit").bind('rated', function (event, value) {
    $(this).find('.tooltip').text('R: ' + tooltipvalues[value - 1]);
});

$('.rateit').bind('mouseleave', function() {
    var v = $(this).rateit('value');
    if (v == 0) {
        $(this).find('.tooltip').html('');
    } else {
        $(this).find('.tooltip').html('R: ' + tooltipvalues[v - 1]);
    }
});

小提琴 http://jsfiddle.net/9xrkr/1/

于 2013-09-30T07:20:12.593 回答
1

尝试将 ids 更改为类名，并尝试将选择器缩小到与 相关this，这应该与被触发的元素相关：

$('#rateitHover')

更改为：

$('.rateit')

此外，您需要获取元素内的工具提示：

$('.tooltip')

更改为：

$(this).find('.tooltip')

并且$('#rateitHover').rateit('value')应该更改为$(this).rateit('value')

更新

显然，由于这一切都是动态提供的，因此您无法进行上述调整。因此，我建议您使用不同的脚本。

我过去为此目的做了一些事情：http: //codepen.io/bozdoz/pen/ClmLI

看看此代码是否适合您的目的。请注意，星星都有类，而不是 ID。它应该更容易操作。希望这对（某人）有所帮助。:)

HTML：

<div class="clearfix stars">    
  <div class="darn">Oh no!</div>
  <div class="brilliant">Thanks!</div>  
  <div class="starHolder">  
    <div class="star">  
      <div class="star">    
        <div class="star">  
          <div class="star">    
            <div class="star"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.stars {width:450px;margin:5% auto;position:relative}
.star {width:66px;height:50px;background:url(http://www.prportfolio.ca/bjd/images/star.png) no-repeat;cursor:pointer;transition: all .5s;-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s;}
.star:hover, .star.on {background-position: -66px 0px;}
.star .star { margin-left: 66px; }
.starHolder {width:345px;margin:0 auto;}
.darn {color:#5c2222}
.brilliant {color:#a0b9d8;right:0px}
.darn, .brilliant {line-height:50px;font-weight:bold;display:none;position:absolute}

JS（jQuery）：

$('.star').click(function(e){
e.stopPropagation();
var i = $('.stars .star').index(this);
if(i==0||i==5){
$(this).parents('.stars').find('.darn').show().delay(100).fadeOut(1000);
}
if(i==4||i==9){
$(this).parents('.stars').find('.brilliant').show().delay(100).fadeOut(1000);
}
$(this).addClass('on').find('.star').removeClass('on').end().parents('.star').addClass('on');
});
于 2013-09-30T07:20:49.467 回答