Создайте несколько ползунков с JQuery автоматически - PullRequest
Новая
       36

Создайте несколько ползунков с JQuery автоматически

0 голосов
/ 03 февраля 2020

Я пытался сделать N ползунков с JQuery более автоматическим c способом, используя итерацию, и у меня есть несколько вопросов (рабочий пример в конце).

Почему первый 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>

1 Ответ

0 голосов
/ 03 февраля 2020

Зачем делать итерации самостоятельно? Пусть 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>

Если вы хотите l oop, l oop поверх существующих элементов 

$(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>
...