Question

我有引导程序滑块。它运行完美，目前，当我通过拖动操作更改值时，我的滑块事件起作用。但是，当我单击滑块时如何添加事件？

myHtml：

<div class="slider warning " style="padding-right: 20px;">
        <label style="font-family: 'Open Sans';padding-top: 10px;">Variants</label><div style="text-align: center" id='res1'>0</div><br>
        <input type="text"  id="variantslider" class="slider-element form-control" value=""  data-slider-value="20" data-slider-step="1" data-slider-max="20" data-slider-min="1" data-slider-orientation="vertical" data-slider-selection="before" data-slider-tooltip="hide" >
</div>

myJs：

$('#variantslider').slider().on('slideStart', function(ev){
    originalVal = $('#variantslider').data('slider').getValue();
});

//Catch slider stop event and capture value
$('#variantslider').slider().on('slideStop', function(ev){
    $('#variantslider').slider().on('slideStop', function(ev){
        var newVal = $('#variantslider').data('slider').getValue();
        //detect if slider value has been changed
        if(originalVal != newVal) {
            //my ops
        }
    });
});

Answer 1

如果还没有，请检查下面链接上的滑块文档。

https://github.com/seiyria/bootstrap-slider

您可以看到所有需要检查的事件，以检查值是否已更改。

对于滑块上的点击事件，可以使用“更改”或“ slideStop”事件。

使用“更改”事件时，“ event.value”返回具有2个属性的对象：“ oldValue”和“ newValue”；

以下是示例：

$("#variantslider").slider();

$("#variantslider").on("slideStop", function(event){
   console.log('slider value: ', event.value);
});

$("#variantslider").on("change", function(event){
   console.log('slider value: ', event.value.oldValue, event.value.newValue);
});

Answer 2

这与常见的Jquery一样。

$("#variantslider").on("click", function(){
    alert(" I'm clicked! ");
});

我尝试了，效果很好。这是我的示例：

https://jsfiddle.net/453krf90/

如何为引导程序滑块添加onclick功能？

2 个答案: