Question

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

$(document).ready(function () {

    $("#zoomSlider").slider({
        min: -3.32,
        max: 4.00,
        step: 0.01,
        value: 0.1,
        animate: false,
            "slide": function (event, ui) {
            $("#zoom").val(ui.value + "%");
        }
    });

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

更新我还需要在滑块更改时调用一个函数。该函数采用两个参数1）事件2）ui，如何在按钮点击时获取这些参数？喜欢：

$('#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") + "%");
        myFunction(event, ui);
    }
});

Answer 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" )+"%" );});
    });

Demo

Answer 2

尝试

$(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") + "%");
    }
});

}）;

演示http://jsfiddle.net/rbW35/5/

Answer 3

与官方documentation中存在的内容类似的示例。 Slide事件仅适用于滑块上的鼠标操作，使用change捕获滑块更改。这是fiddle

$(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);
    });
});

Answer 4

jsFiddle Example

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

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

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

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

4 个答案: