簡體   English   中英

自適應滑塊JavaScript

[英]Responsive slider javascript

我正在嘗試創建一個響應式滑塊。 我搜索了許多水平滑塊示例,發現這是最簡單直接的示例。 現在,我想修改代碼以使其響應。 例如,當滑塊位於2013年時,應該會發生一些事情。 我所需要知道的是我將在代碼中的何處實現此目標。 因此,如果有人可以幫助改編下面的代碼,那將非常有幫助。 對於可以滑動到的每個數字,只是一個不同的打印語句就很棒了。 先感謝您!

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Slider bound to select</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    var select = $( "#minbeds" );
    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
      min: 1,
      max: 8,
      range: "min",
      value: select[ 0 ].selectedIndex + 1,
      slide: function( event, ui ) {
        select[ 0 ].selectedIndex = ui.value - 1;
      }
    });
    $( "#minbeds" ).change(function() {
       slider.slider( "value", this.selectedIndex + 1 );
    });
  });
   </script>
</head>
<body>

<form id="reservation">
   <label for="minbeds">Minimum number of beds</label>
   <select name="minbeds" id="minbeds">
    <option>2013</option>
    <option>2014</option>
    <option>2015</option>
    <option>2016</option>
    <option>2017</option>
    <option>2018</option>
    <option>2019</option>
    <option>2020</option>
   </select>
</form>


</body>
</html> 

這發生在幻燈片功能中

slide: function( event, ui ) {
    console.log(ui.value); // prints 1 for 2013, 2 for 2014 ...
    select[ 0 ].selectedIndex = ui.value - 1;
}

要使其響應,請使用類似以下的內容

slide: function( event, ui ) {
    var index = ui.value-1;
    select[ 0 ].selectedIndex = index;
    if (select[0][index].text === "2013") { // text works, but innerHTML, innerText and label do too
        console.log("2013!");
    }
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM