如何在滑动范围为0和1001时显示和隐藏元素？

如何在滑动范围为0和1001时显示和隐藏元素？如何在滑动范围为0和1001时显示和隐藏元素？

当滑动范围0而1001`

enter image description here

如何隐藏id="bottomValue"，id="topValue"并显示id="All_value"

我的代码：

$(function(){ 
 
     $('#rangeslider').slider({ 
 
     range: true, 
 
     min: 0, 
 
     max: 1001, 
 
     values: [ 600, 890 ], 
 
     slide: function(event, ui) { 
 
      $('#bottomValue').val(ui.values[0]); 
 
      $('#topValue').val(ui.values[1]); 
 
      $('#rangeval').html(ui.values[0]+" - "+ui.values[1]); 
 
     }, 
 
     change: function(event, ui) { 
 
      $("#f1id").submit(); 
 
     } 
 
    
 
     }); 
 
    });

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
 
    
 
    
 
    <body style=" width: 300px; "> 
 
    <input name="bottomValue" style=" border: 0; color:#f6931f; font-weight:bold; float: left; width: 32px; text-align: right; font-family: lato; " id="bottomValue" type="text" value="600"> 
 
    <div style="border: 0; color: #f6931f; font-weight: bold; float: left; width: 12px; text-align: center; font-family: lato;">-</div> 
 
    <input name="topValue" style=" border: 0; color:#f6931f; font-weight:bold; float: left; width: 32px; text-align: right; font-family: lato; " id="topValue" type="text" value="890"> 
 
    <input name="All_value" style=" border: 0; color:#f6931f; font-weight:bold; float: left; width: 32px; text-align: right; font-family: lato; display: none; " id="All_value" type="text" value="ALL VALUE"> 
 
    <br> 
 
    <br> 
 
    <div id="rangeslider"></div> 
 
    </body>

来源

2014-09-21 pap mooo

试试这个：

 $(function(){ 
 
    $('#rangeslider').slider({ 
 
    range: true, 
 
    min: 0, 
 
    max: 1001, 
 
    values: [ 600, 890 ], 
 
    slide: function(event, ui) { 
 
     $('#bottomValue').val(ui.values[0]); 
 
     $('#topValue').val(ui.values[1]); 
 
     $('#rangeval').html(ui.values[0]+" - "+ui.values[1]); 
 
     
 
     if(ui.values[0] == 0 || ui.values[1] == 1001){ 
 
      $("#bottomValue").hide(); 
 
      $("#topValue").hide(); 
 
      $("#All_value").show(); 
 
     } 
 
     else{ 
 
      $("#bottomValue").show(); 
 
      $("#topValue").show(); 
 
      $("#All_value").hide(); 
 
     } 
 
    }, 
 
    change: function(event, ui) { 
 
     $("#f1id").submit(); 
 
    } 
 

 
    }); 
 
});

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
 
    
 
    
 
    <body style=" width: 300px; "> 
 
    <input name="bottomValue" style=" border: 0; color:#f6931f; font-weight:bold; float: left; width: 32px; text-align: right; font-family: lato; " id="bottomValue" type="text" value="600"> 
 
    <div style="border: 0; color: #f6931f; font-weight: bold; float: left; width: 12px; text-align: center; font-family: lato;">-</div> 
 
    <input name="topValue" style=" border: 0; color:#f6931f; font-weight:bold; float: left; width: 32px; text-align: right; font-family: lato; " id="topValue" type="text" value="890"> 
 
    <input name="All_value" style=" border: 0; color:#f6931f; font-weight:bold; float: left; width: 32px; text-align: right; font-family: lato; display: none; " id="All_value" type="text" value="ALL VALUE"> 
 
    <br> 
 
    <br> 
 
    <div id="rangeslider"></div> 
 
    </body>

来源

2014-09-21 15:16:36

您可以通过在change事件这样的呼吁ui.value访问滑块值：

$(function(){ 
    $('#rangeslider').slider({ 
    range: true, 
    min: 0, 
    max: 1001, 
    values: [ 600, 890 ], 
    slide: function(event, ui) { 
     $('#bottomValue').val(ui.values[0]); 
     $('#topValue').val(ui.values[1]); 
     $('#rangeval').html(ui.values[0]+" - "+ui.values[1]); 
    }, 
    change: function(event, ui) { 
     console.log(ui.value); 
     var newValue = ui.value;   
     if(newValue === 0){ 
      //code to hide 
      $("#bottomValue, #topValue").hide(); 
      $("#All_value").show(); 
     }else if(newValue === 1001){ 
      //code to show 
      $("#bottomValue, #topValue").show(); 
      $("#All_value").hide(); 
     } 
     //$("#f1id").submit(); 
    } 

    }); 
});

来源

2014-09-21 15:11:13

在何处放置你的代码，我尝试放置你的代码，但不工作。 – 2014-09-21 15:15:18

检查更新 – 2014-09-21 15:15:56

如何在滑动范围为0和1001时显示和隐藏元素？

回答

相关问题