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

所有内容都需要加上#

这是我的小提琴：http://jsfiddle.net/h6fgb12v/1/

我删除了一些损坏的控制台日志，通过jquery而不是内联绑定了复选框更改，并从幻灯片内部删除了步骤更改（因为您在复选框更改时将其绑定）。还有一些来自缺失ID的错误，但这应该会让你朝着正确的方向发展

Answer 2

您的快照选择器错误。你错过了#char。

你也应该使用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();

});

对不起，我很抱歉。但我错误地更新了小提琴

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

3 个答案: