Question

是否可以在增量滑块上创建if / then语句？这是代码：

<script>
$(function() {
    $( "#slider" ).slider({
        value:0,
        min: 0,
        max: 2,
        step: 1,
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.value );
        }
    });
    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
</script>
</head>
<body>
<p id="amount">
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">

</p>
<div id="slider"></div>

换句话说，我有一个3个增量的滑块。当增量为min时，我希望它显示一个div（带有内容），并且在med和max两个其他div上。

我认为最好的方法是做一个if / then，但不确定如何去做。

解决方案？

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Snap to increments</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>

</style>
<script>
$(function () {
    $("#slider").slider({
        value: 0,
        min: 0,
        max: 2,
        step: 1,
        slide: function (event, ui) {
            $("#amount").val("$" + ui.value);
        },

        change: function (event, ui) {
            if (ui.value == 0) {
                $("#stepone").show();

            } 
             else if(ui.value == 1) {
                $("#stepone").hide();
                $("#steptwo").show();
                $("#stepthree").hide();            } 
            else {
                $("#stepone").hide();
                $("#steptwo").hide();
                $("#stepthree").show();            }
        }
    });
    $("#amount").val("$" + $("#slider").slider("value"));

});

</script>

</head>

<body>

<div id="stepone">Step One</div>

<div id="steptwo">Step Two</div>

<div id="stepthree">Step 3</div>
<input style="display:none"type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider"></div>
</body>
</html>

Answer 1

使用change事件：

$( "#slider" ).slider({
    value:0,
    min: 0,
    max: 2,
    step: 1,
    slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.value );
    },
    change: function( event, ui) {
        if (ui.value == 0) {
            $("#mindiv").show();
        } else {
            $("#mindiv").hide();
        }
    }
});

FIDDLE

Answer 2

处理change事件

$( "#slider" ).on( "slidechange", function( event, ui ) {
  var value = $( "#slider" ).slider( "value" );
  if(value==1){
  }else{
  }
});

如果/然后在增量滑块？

2 个答案: