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] < / em>是 undefined ）。

有什么想法吗？

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的想法，如果你封装了Sliders＆amp; amp;输入个别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

亲爱的Ramakanth，

感谢您的回答。多亏了这些，我编译了运行良好的代码（以及用于的种类，因此我不必在初始化阶段手动输入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滑块 - slide：for循环中的function（event，ui）

3 个答案: