javascript - Bootstrap slider - 获取值并将其显示在 div 中

Question

我已经实现了 bootstrap 和 jquery 以及 bootstrap jquery ( https://github.com/seiyria/bootstrap-slider )。我正在使用示例 6 ( http://seiyria.com/bootstrap-slider/ )。我想获取该值并将其显示在 div 中(以便稍后我可以使用该值创建 if )，但我无法显示它。这是我的 HTML 代码:

<div class="col-lg-6" style="height: 39px; padding: 10px; padding-left: 25px;>
    <input id="ex6" type="text" data-slider-min="10000" data-slider-max="100000" data-slider-step="1" data-slider-value="90000"/>
    <span id="ex6CurrentSliderValLabel">Maksimalna cena: <span id="ex6SliderVal">90000</span></span> din.
</div>
<div id ="ivancar"> test </div>

这是我的 JavaScript (jQuery) 代码:

var slider = new Slider("#slider1");
   slider.on("slide", function(slideEvt) {
   console.log(slider.getValue() );
   var div = slider.getValue();
});
document.getElementById("ivancar").innerHTML = div;

Answer 1

您已将更新 div 的逻辑置于 slide 事件之外。将其放置在幻灯片事件中。

 slider.on("slide", function(slideEvt) {
   console.log(slider.getValue() );
   var div = slideEvt.value; // this is what the plugin says
   $("#ivancar").html(div); // <== update logic must be here
});

注意:我将 document.getElementById("ivancar").innerHTML = div; 代码更改为 $("#ivancar").html( div); 为简单起见