jQuery slider - slide: function (event, ui) in for 循环

Question

我有一个带有 2 个（或更多）jQuery 个滑块的简单代码：

HTML:

<label for="ST">ST:</label>
<input type="text" id="ST" value="10">
<div id="slider-ST"></div>        

<label for="DX">DX:</label>
<input type="text" id="DX" value="10">
<div id="slider-DX"></div>

和 JS:

$function(){    
$( "#slider-ST" ).slider({
  orientation: "horizontal",
  range: "min",
  value: 10,

  slide: function (event, ui) {sliderChange(ui,"#ST");}
});


$( "#slider-DX" ).slider({
  orientation: "horizontal",
  range: "min",
  value: 10,

  slide: function (event, ui) {sliderChange(ui,"#DX");}
});

function sliderChange(t, disp)
{
   $(disp).val(t.value);
};
}

效果很好。

现在，我想让它变得更好，我想在 for 循环中调用这些函数：

$function(){
var ID_Inp = ["#slider-ST", "#slider-DX"];    
var ID_Sli = ["#ST", "#DX"];     
var i;
for (i=0;i<ID_Inp.length;i++)
{
  $(ID_Inp[i]).slider({
  orientation: "horizontal",
  range: "min",
  min: 1,
  max: 18,
  value: 10,

  slide: function (event, ui) {sliderChange(ui,ID_Sli[i]);}
  });
};
function sliderChange(t, disp)
{
   $(disp).val(t.value);
};
}

jsfiddle 上也提供了简化代码：

working

not working (using for loop)

发生的事情是，i 在更改滑块值后设置为 2，显然函数 sliderChange 无法正常工作（ID_Sli[i] 是 未定义).

有什么想法吗？

Answer 1

For 循环不是这个的好选择，我认为你需要像下面那样做：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $(function() {
    $("#slider-range-max-cars,#slider-range-max-beds").slider({
      range: "max",
      value: 2,
      slide: function(event, ui) {
        $("#amountcars").val($("#slider-range-max-cars").slider("value"));
        $("#amountbeds").val($("#slider-range-max-beds").slider("value"));
      }
    });
    $("#amountcars").val($("#slider-range-max-cars").slider("value"));
    $("#amountbeds").val($("#slider-range-max-beds").slider("value"));
  });
</script>

<body>
  <label for="beds">Minimum number of bedrooms:</label>
  <input type="text" id="amountbeds">
  <div id="slider-range-max-beds"></div>

  <p>
    <label for="cars">Minimum number of cars:</label>
    <input type="text" id="amountcars">
    <div id="slider-range-max-cars"></div>
    <div id="debug">

    </div>
</body>

</html>

有关详细信息，请阅读 documention

Answer 2

我不确定为什么在这种情况下您需要使用 for 循环，这可以简化。扩展 Govind 的想法，如果将滑块和输入封装到单独的 Div 中：

<div id="bedsSection">
    <input type="text" id="amountbeds">
    <div id="slider-range-max-beds"></div>
</div>

在此之后，使用相同的事件，您可以查询父级以找到相关输入。相应更新。

$( "#slider-range-max-beds, #slider-range-max-cars" ).slider({
      range: "max",
      value: 2,
      slide: function( event, ui ) {
                var input = $(this).parent().find("input");
                input.val( ui.value );

            //Could also be written as $(this).parent().find("input").val(ui.value); 
      }
});

Answer 3

亲爱的斋月，

感谢您的回答。多亏了这些，我编译了运行良好的代码（并且有点使用 for，所以我不必在初始化阶段手动输入 ID）：

<div class="params">      
<div id="STSection">
<label for="ST">Strength:</label>
<input type="text" id="ST" value="10">
<div id="slider-ST" style="width:300px;"></div>        
</div>
<div id="DXSection">
<label for="DX">Dexterity:</label>
<input type="text" id="DX" value="11">
<div id="slider-DX" style="width:300px;"></div>        
</div>

和 JS:

$('.params div').each(function() {
        $(this).find("div").slider({
        value: $(this).find("input").val(),
        orientation: "horizontal",
        slide: function( event, ui ) {
            $(this).parent().find("input").val(ui.value);
           }
        });
    });

我要理解的最重要的部分是如何使用嵌入到 div 部分中的 .each()。然后显然要使用 parent() 和 find()。这些真的很有帮助！

谢谢！

jQuery slider - slide: function (event, ui) in for 循环

jQuery slider - slide: function (event, ui) in for loop

javascript

jquery

jquery-ui-slider