Jquery 追加 x 倍的幻灯片值

Question

我基本上使用 bootstrap-slider.js 创建了一个滑块。如果在滑块上滑动，值会按预期变化，现在我想在滑块中附加一些 HTML 与我的值相同的数字。到目前为止，代码如下所示：

$("#slider").slider();
$("#slider").on("slide", function(slideEvt) {
    $("#SliderVal").text(slideEvt.value);
    $("div").mouseup(function(){
        $("#sliderAppend").append('<div><p>test</p></div>');
    });
});

HTML 看起来像这样：

<input id="slider" data-slider-id='slider' style="width:600px;"type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0"/>
<span id="CurrentSliderValLabel">Current:
    <span id="SliderVal">X</span> appends
</span>

<div id="sliderAppend">

</div>

因此，例如，如果将滑块拖动到 10 并释放鼠标，该函数应追加 <div><p>test</p></div> 10 次。

Answer 1

您应该按如下方式使用事件：

$("#slider").slider({
  change : function(e, slider){
        $('#sliderAppend').empty();

        for(var i=0;i<slider.value;i++)
          $('#sliderAppend').append('<div><p>test</p></div>');
  },
  slide : function(e , slider){
    $('#slideVal').val(slider.value)
  }
});

对于附加本身，如此处所述，一个简单的 for 非常适合。

http://jsfiddle.net/ay6rw8sc/3/

Jquery 追加 x 倍的幻灯片值

Jquery append x times the slide value

javascript

jquery

append

slider