Jquery ui 滑块：根据复选框设置步骤

Question

我正在尝试设置我的 jquery ui 滑块，这样如果我的复选框未选中，它的步长值为 0.1，或者如果复选框被选中，则步长值为1. 我在 jquery 方面的经验非常有限，并且仍在学习中，因此我们将不胜感激。到目前为止，这是我尝试过的。 JSFIDDLE

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>

Answer 1

您的代码中到处都缺少 id

var harmonicSnap = $("harmonicSnap");
$("harmonicsSlider").slider("option", "step", 1);
$("harmonicsSlider").slider("option", "step", 0.1);

都需要在前面加上#

这是我的 fiddle：http://jsfiddle.net/h6fgb12v/1/

我删除了一些损坏的控制台日志，通过 jquery 而不是内联绑定了复选框更改，并从幻灯片内部删除了步骤更改（因为您将其绑定到复选框更改上）。缺少 ID 仍然存在一些错误，但这应该会让您朝着正确的方向前进

Answer 2

您的捕捉选择器有误。您缺少 # 字符。

您还应该使用 harmonicSnap.is(":checked") 来检查它是否被选中。

jsfiddle

var harmonicSnap = $("#snap");

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

Answer 3

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

});

对不起。但是我错误地更新了 fiddle

Jquery ui 滑块：根据复选框设置步骤

Jquery ui slider: Set step based on checkbox

javascript

jquery

checkbox

jquery-ui-slider