多jQuery的滑塊

我有一個jQuery UI滑塊綁定到一個選擇框，使用jQuery UI's example code的頁面。然而，我想在其中的一些頁面上看到其中的幾個，並想知道做到這一點的最佳方法是什麼？多jQuery的滑塊

我嘗試了重複的代碼，並更改標識類和變量名不同的人，它似乎並沒有工作。

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Slider - Slider bound to select</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.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: 6, 
     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>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    </select> 
</form> 

</body> 
</html>

來源

2013-07-31 fnkymnky

你可以分享你的代碼？ –

添加的代碼的第一個註釋（它從我要複製的jQuery UI的例子直複印件）。 – fnkymnky

我猜你只需要利用每一個（）的，看到我jsFiddle example

的Html

<form id="reservation"> 
    <label for="minbeds">Minimum number of beds</label> 
    <select name="minbeds" id="minbeds" class='needSlider'> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    </select> 

    <label for="minbeds2">Minimum number of beds 2</label> 
    <select name="minbeds2" id="minbeds2" class='needSlider'> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    </select> 
</form>

的Javascript

$(".needSlider").each(function() { 
     var select = $(this); 
     var slider = $("<div id='slider'></div>").insertAfter(select).slider({ 
      min: 1, 
      max: 6, 
      range: "min", 
      value: select[ 0 ].selectedIndex + 1, 
      slide: function(event, ui) { 
      select[ 0 ].selectedIndex = ui.value - 1; 
      } 
     }); 
     select.change(function() { 
      slider.slider("value", this.selectedIndex + 1); 
     }); 
    });

來源

2013-07-31 11:27:49

非常好，謝謝！ – fnkymnky

多jQuery的滑塊

回答

相關問題