jQuery滑块 - 幻灯片：for循环中的函数（事件，ui）答案

【问题标题】：jQuery slider - slide: function (event, ui) in for loopjQuery滑块 - 幻灯片：for循环中的函数（事件，ui）
【发布时间】：2017-07-05 07:02:42
【问题描述】：

我有一个带有 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] 是 未定义）。

有什么想法吗？

【问题讨论】：

你能给一个适合你的JSFiddle吗，这段代码似乎不起作用！！
用简单的 jsfiddle 示例更新了代码。
幻灯片：函数（事件，用户界面）{警报（'#'+ ID_Sli[i]）； }，在slider函数内部打印ID_Sli[i]的值，它打印#undefined，这意味着Name数组不能从函数内部访问。因此它无法更新输入框。

标签： javascript jquery jquery-ui-slider

【解决方案1】：

我不确定为什么在这种情况下需要使用 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); 
      }
});

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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()。这些真的很有帮助！

谢谢！

【讨论】：