使用 JQuery 自动创建多个滑块

Question

我正在尝试使用迭代以更自动的方式使用 JQuery 制作 N 个滑块，但我有几个问题（工作示例在最后）。

为什么第一个 JQuery 代码可以工作，但第二个 JS 代码不能用于生成多个滑块？这不应该以同样的方式遍历 arr 吗？有没有其他可能的方法来使用 JS 循环并将参数传递给 JQuery 来制作滑块？

JQuery:

  var arr = [ "1" , 2, 3, 4];
  jQuery.each( arr, function( i, val ) {
    $( function() {
        $( "#slider"+val ).slider();
    } );
  });

和JS代码：

for(var i=0; i<4; i++){
    $( function() {
        $( "#slider"+arr[i] ).slider();
    } );
  }

这是一个简单示例中的代码。

var arr = ["1", 2, 3, 4]; // 

jQuery.each(arr, function(i, val) {
  console.log("#slider" + val)
  $(function() {
    $("#slider" + val).slider();
  });
});

/*for(var i=0; i<4; i++){
  $( function() {
      $( "#slider"+arr[i] ).slider();
  } );
}*/

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<div id="slider1"></div>
<div id="slider2"></div>
<div id="slider3"></div>
<div id="slider4"></div>

Answer 1

为什么要自己迭代？让 jQuery 完成工作

另外 $(function() {}) 是 $(document).ready(function(){}) 的替代品，所以你把事情复杂化了太多

$(function() {
  $(".slider").slider();
})

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<div class="slider" id="slider1"></div>
<div class="slider" id="slider2"></div>
<div class="slider" id="slider3"></div>
<div class="slider" id="slider4"></div>

如果你想循环，循环现有的元素

$(function() {
  $(".slider").each(function() { $(this).slider() })
})

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<div class="slider" id="slider1"></div>
<div class="slider" id="slider2"></div>
<div class="slider" id="slider3"></div>
<div class="slider" id="slider4"></div>

使用 JQuery 自动创建多个滑块

Create multiple sliders with JQuery automatically

javascript

jquery

slider

rangeslider