Question

如果幻灯片范围为0和1001？

，如何显示和隐藏元素

当幻灯片范围为0和1001`

时

enter image description here

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

我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以通过ui.value事件调用change来访问滑块值，如下所示：

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

  });
});

Answer 2

试试这个：

       $(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>

幻灯片范围为0和1001时如何显示和隐藏元素？

2 个答案: