Jquery 追加 x 乘以幻灯片值

Jquery append x times the slide value

本文关键字：幻灯片 追加 Jquery      更新时间：2023-09-26

我基本上用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 次。

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

$("#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/

相关文章：