jQuery UI滑块：基于复选框设置步骤

问题描述

我正在尝试设置jquery ui滑块，以便如果未选中我的复选框，它将具有0.1的步长值，或者如果已选中此复选框，则步长值为1。我对jquery的经验非常有限，并且仍在学习因此任何帮助将不胜感激。 到目前为止，这是我尝试过的。

JS

//Setup for jquery ui slider
harmonicSlider = $("#harmonicSlider").slider({
    value: 1,
    min: 1,
    max: 5,
    step: 1,

    //Updates the slider textbox with the current value of the slider.
    slide: function(event, ui){
        var harmonicSnap = $("harmonicSnap");

        setSliderBoxValue(ui.value);

        if(harmonicSnap.checked){
            $(this).slider("option", "step", 1);
        }else{
            $(this).slider("option", "step", 0.1);
        }

        var stepping = $(this).slider('option', 'step');
        console.log("Step: " + stepping);
    },

    //Gets the slider value after a change to the slider is made.
    change: function (event, ui){
        getSliderValue(ui.value);
    }
});

//Grabs the slider value and returns it.
function getSliderValue(slideVal){
    console.log("Slider Value: " + slideVal);
}

//Sets the sliderValueBox to the current value of the slider.
function setSliderBoxValue(currentValue){
    $("#sliderValueBox").val(currentValue);
}

//Sets the step of the slider depending on if the harmonics checkbox is checked or not.
function setSliderIncrement(){
    var harmonicSnap = document.getElementById("harmonicSnap");
    //var slider = $("harmonicsSlider").slider();

    if(harmonicSnap.checked){
        $("harmonicsSlider").slider("option", "step", 1);
        console.log("Step: " + $("harmonicsSlider").slider("option", "step").val());
    }else{
        $("harmonicsSlider").slider("option", "step", 0.1);
        //step = $("harmonicsSlider").slider("option", "step");
        console.log("Step: " + $("harmonicsSlider").slider("option", "step").val());
    }
}

//Loads the harmonic slider selector and slider labels
function loadHarmonicSlider(){
    var sliderValTextBox = $("sliderValueBox");

    harmonicSlider.each(function() {
        //Add labels to slider specified by the min, max, and step values

        var options = $(this).data().uiSlider.options;

        var values = options.max - options.min;

        //Spacing for value labels
        for(var i = 0; i <= values; i++){
            var element = $("<label>" + (i + 1) + "</label>").css("left", (i / values * 100) + "%");

            $("#harmonicSlider").append(element);
        }
    });
}

的HTML

<form>
        <div id="harmonicSliderLabel">n:</div>
        <div id="harmonicSlider"></div>
        <div id="sliderInputs">
            <input type="text" id="sliderValueBox" value="1">
            <input type="checkbox" id="harmonicSnap" value="Snap to harmonics" onchange="setSliderIncrement();" checked>Snap to harmonics
        </div>
    </form>

您的捕捉选择器错误。 您缺少＃字符。

另外，您应该使用谐波快照.is（“：checked”）来检查它是否被选中。

var harmonicSnap = $("#snap");

setSliderBoxValue(ui.value);
if (harmonicSnap.is(":checked")) {
    $(this).slider("option", "step", 1);
} else {
    $(this).slider("option", "step", 0.1);
}

的HTML

<div id="slider"></div>
<div id="sliderInputs">
    <input type="text" id="sliderValueBox" value="1">
    <input type="checkbox" id="snap" checked>Snap to whole numbers
</div>

JS

<script>
$(function() {
   var harmonicSlider = $("#slider").slider({
        value: 1,
        min: 1,
        max: 5,
        step: 1,
        slide: function (event, ui) {
            setSliderBoxValue(ui.value);
        },
        change: function (event, ui) {
            getSliderValue(ui.value);
        }
    });

    function getSliderValue(slideVal){
        console.log("Slider Value: " + slideVal);
    }

    function setSliderBoxValue(currentValue){
        $("#sliderValueBox").val(currentValue);
    }

    $('#snap').change(function() {
        var step = $(this).is(":checked")?1:0.1;
        $("#slider").slider({step: step});
    });
    $('#snap').change();

});

对不起。 但是我错误地更新了小提琴