Javascript 如何在单击按钮时触发滑块更改事件

我有一个jquery滑块。我有两个按钮，即ZoomIn和ZoomOut。我想滑动这些按钮上的滑块单击。与单击ZoomIn一样，它应该向右滑动，单击ZoomOut应该向左滑动，并且应该调用各自的滑动函数/事件

已更新 我还需要在滑块更改时调用一个函数。该函数包含两个参数1）事件2）ui，当按钮单击时如何获取这些参数？比如：

$（'zoomIn'）。在（'click'，函数（）{
如果（计数器<4.00）{//如果计数器小于最大值
计数器+=.1；//递增计数器
$slider.slider（“值”，计数器）
$（“#缩放”）.val（$slider.slider（“value”）+“%”）；
myFunction（事件、用户界面）；
}
});

试试看

$（文档）.ready（函数（）{
变量计数器=0，//初始化计数器
$slider=$（“#zoomSlider”）；
$slider.slider({
最低：-3.32，
最高：4.00，
步骤：0.01，
数值：0.1，
动画：假，
“幻灯片”：功能（事件、用户界面）{
$（“#缩放”）.val（ui.value+“%”）；
counter=ui.value；//如果用户滑动，请更改计数器值
}
});
$（“#缩放”）.val（$slider.slider（“value”）+“%”）；
计数器=$slider.slider（“value”）；//在计数器中设置滑块值
$（'#zoomIn'）。在（'单击'，函数（）上）{
如果（计数器<4.00）{//如果计数器小于最大值
计数器+=.1；//递增计数器
$slider.slider（“值”，计数器）
$（“#缩放”）.val（$slider.slider（“value”）+“%”）；
}
});
$（'#zoomOut'）。在（'click'，函数（）{
如果（计数器>-3.32）{//如果计数器大于最小值
计数器-=.1；//减量计数器
$slider.slider（“值”，计数器）
$（“#缩放”）.val（$slider.slider（“value”）+“%”）；
}
});

}))

---

演示

与您想要的类似的示例存在于official中。事件仅用于鼠标操纵滑块，用于捕获滑块更改。这是

我们首先得到滑块的当前值。然后，我们将滑块值设置为当前值减去1

$('#zoomOut').click(function() {
    var current_value = $('#zoomSlider').slider('option','value');
    $("#zoomSlider").slider("value", current_value-=1);
});

如果希望在滑块改变值时对其设置动画，可以在创建滑块时将“animate”参数更改为“true”

请尝试以下操作：

    $(document).ready(function(){       

          $("#zoomIn").click(function (){ 

          var current = $( "#zoom" ).val().slice(0,-1);
          var new_position =  (parseFloat(current)+0.1) ;             
              $("#zoom").val( new_position +"%"); 
              $("#zoomSlider").slider('value',new_position);                        
              $( "#zoom" ).val( $( "#zoomSlider" ).slider( "value" )+"%" );});

          $("#zoomOut").click(function (){ 

              var current = $( "#zoom" ).val().slice(0,-1);
              var new_position_out =  (parseFloat(current)-0.1) ;                
                 $("#zoom").val( new_position_out +"%"); 
                 $("#zoomSlider").slider('value',new_position_out);                        
                 $( "#zoom" ).val( $( "#zoomSlider" ).slider( "value" )+"%" );});
    });

---

这个myFunction做什么？这个函数使svg缩放并做更多的事情。

$(document).ready(function () {

var counter = 0, //initialize counter
    $slider = $("#zoomSlider");

$slider.slider({
    min: -3.32,
    max: 4.00,
    step: 0.01,
    value: 0.1,
    animate: false,
    "slide": function (event, ui) {
        $("#zoom").val(ui.value + "%");
        counter = ui.value; //change counter value if user slides

    }
});
$("#zoom").val($slider.slider("value") + "%");

counter = $slider.slider("value"); // set slider value in counter

$('#zoomIn').on('click', function () {

    if (counter < 4.00) { //if counter less than max value
        counter += .1; //increment counter
        $slider.slider("value", counter)
        $("#zoom").val($slider.slider("value") + "%");
    }
});

$('#zoomOut').on('click', function () {
    if (counter > -3.32) { //if counter greater than min value
        counter -= .1; //decrement counter
        $slider.slider("value", counter)
        $("#zoom").val($slider.slider("value") + "%");
    }
});

$(document).ready(function () {
    var slider = $("#zoomSlider"),
        counter = $("#zoom");

    slider.slider({
        min: -3.32,
        max: 4.00,
        step: 0.01,
        value: 0.1,
        animate: false,
        change: function (event, ui) {
            counter.val(ui.value.toFixed(2) + "%");
        }
    });

    counter.val(slider.slider("value").toFixed(2) + "%");

    $('[type="button"]').on('click', function (event) {
        var el = $(event.currentTarget),
            mult = el.data().negative ? 1 : -1;

        slider.slider("value", slider.slider("value") + slider.slider("option", "step") * mult);
    });
});

$('#zoomOut').click(function() {
    var current_value = $('#zoomSlider').slider('option','value');
    $("#zoomSlider").slider("value", current_value-=1);
});

    $(document).ready(function(){       

          $("#zoomIn").click(function (){ 

          var current = $( "#zoom" ).val().slice(0,-1);
          var new_position =  (parseFloat(current)+0.1) ;             
              $("#zoom").val( new_position +"%"); 
              $("#zoomSlider").slider('value',new_position);                        
              $( "#zoom" ).val( $( "#zoomSlider" ).slider( "value" )+"%" );});

          $("#zoomOut").click(function (){ 

              var current = $( "#zoom" ).val().slice(0,-1);
              var new_position_out =  (parseFloat(current)-0.1) ;                
                 $("#zoom").val( new_position_out +"%"); 
                 $("#zoomSlider").slider('value',new_position_out);                        
                 $( "#zoom" ).val( $( "#zoomSlider" ).slider( "value" )+"%" );});
    });