Jquery ui slider:基于复选框设置步长

Jquery ui slider: Set step based on checkbox

本文关键字：复选框 设置 ui slider Jquery      更新时间：2023-09-26

我正在尝试设置我的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>

您的snap选择器是错误的。你漏掉了# 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);
}

代码中到处都缺少id 

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

都需要加#

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

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

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

相关文章：