Функция JQuery во время цикла

Question

Я новичок в JQuery и должен отображать несколько ползунков JQuery на одной странице.

Я должен отображать слайдер каждый раз, когда результат исходит из запросов MySQL.
Я могу отобразить один слайдер, но не могу отобразить несколько ползунков, потому что я не могу изменить имя ID в javascript.
Я также не могу вызвать эту функцию несколько раз ... Пожалуйста, помогите.

HTML страницы:

<?php 
$reponse = $bdd->prepare('SELECT id FROM TABLE WHERE deleted = 0 ');    
$reponse->execute(); 

    $slider = array(); 
    $i = 0; 

    while ($data = $reponse->fetch()) { 

      $slider[$i] = $data['id']; 
      $i ++; ?> 
      <div id="<?php echo "slider" . $data['id']; ?>"> </div> 
      <input type="text" id="<?php echo "amount" . $data['id']; ?>"> <?php 
    } ?> 

Javascript страница:

$(function() { 
var name = "#slider1"; 
    $(name).slider({ 
     value:100, 
     min: 5, 
     max: 300, 
     step: 5, 
     slide: function(event, ui) { 
     $("#amount").val(ui.value); 
     } 
    }); 
    $("#amount").val($(name).slider("value")); 
    }); 

// EDIT

Slider соединяется с классом для всех элементов, но я не могу поставить правильное значение ползун в amount.
У меня есть несколько вариантов, чтобы принять идентификатор текущего слайдера перемещения, но ни один из них не работают:

$(function() { 
    $(".slider").slider({ 
     value:100, 
     min: 5, 
     max: 300, 
     step: 5, 
     slide: function(event, ui) { 
     // check the event and ui variables to see what the exact reference you 
     // your element is but it looks like it's ui.handle 
     // console.log(ui); 
     // console.log(ui.handle); 
     var clicked_element = ui.handle.data('id'); 
     $("#amount" + clicked_element).val(ui.value); 
     } 
    }); 
    $("#amount3").val($(".slider").slider("value")); 
    }); 

Answer 1

Здесь вы можете попробовать этот код :)

Html

<div id="slider1"></div> 
<div id="slider3"></div> 
<div id="slider4"></div> 
<div id="slider6"></div> 
<div id="slider8"></div> 

jQuery.

for(var i = 0; i< count; i++){ 
    (function(i){ 
     var name = "#slider" + i; 
     if($(name)){ 
     $(name).slider({ 
      value:100, 
      min: 5, 
      max: 300, 
      step: 5, 
      slide: function(event, ui) { 
       $("#amount").val(ui.value); 
      } 
     }); 
     } 
    })(i); 
} 

в коде подсчет является подсчет тегов ДИВид = слайдера + я

обновление

<?php 
$reponse = $bdd->prepare('SELECT id FROM TABLE WHERE deleted = 0 ');    
$reponse->execute(); 

$slider = array(); 
$i = 0; 

while ($data = $reponse->fetch()) { 

     $slider[$i] = $data['id']; 
     $i ++; ?> 
     <div id="<?php echo "slider" . $data['id']; ?>"> </div> 
     <input type="text" id="<?php echo "amount" . $data['id']; ?>"> <?php 
} 
echo "<script> var count = $i;</script>"; 
?> 

Я добавил echo "<script> var count = $i;</script>"; этот код был объявить Вэл графа ;

Answer 2

Вы должны добавить класс к элементам, которые вы хотите прикрепить ползунок так, что их можно прикрепить чтобы все сразу:

<div id="<?php echo "slider" . $data['id']; ?>" class="my_slider"> </div> 

И на JavaScript:

// attach slider to all elements at once 
$('.my_slider').slider({ 
    value:100, 
    ... 

Тогда у вас есть несколько вариантов, чтобы получить сумму окна правильно:

• Вы можете получить следующий элемент в DOM. Недостатком является то, что это зависит от структуры html. Например: $(this).next();
• Вы можете добавить атрибут данных, чтобы получить правильный идентификатор, и вы можете использовать его для задания правильной суммы;
• Вы можете обернуть комбинации ползунков и сумм в элемент контейнера, чтобы вы могли легко настроить правильную сумму. Это немного более гибко, чем первый вариант, поскольку элементы не должны быть рядом друг с другом.

Обратите внимание, что вы должны проверить, если $(this) внутри вашей внутренней функции по-прежнему содержит ссылку на манипулируют ползунок div. Документация должна прояснить это.

Edit: Некоторые больше информации о втором варианте:

HTML/PHP:

<div class="my_slider" data-id="<?php echo $data['id']; ?>"> </div> 
<input type="text" id="<?php echo "amount" . $data['id']; ?>"> 

JavaScript:

 slide: function(event, ui) { 
     // check the event and ui variables to see what the exact reference you 
     // your element is but it looks like it's ui.handle 
     // console.log(ui); 
     // console.log(ui.handle); 
     var clicked_element = ui.handle.data('id'); 
     $("#amount" + clicked_element).val(ui.value); 
     } 

Answer 3

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 

     <link rel="stylesheet" href="../search/jquery-ui.structure.min.css"> 
     <link rel="stylesheet" href="../search/jquery-ui.theme.min.css"> 
     <link rel="stylesheet" href="Jqueryslider/jquery-ui.min.css"> 

    </head> 
<body> 
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script type="text/javascript" src="Jqueryslider/jquery-ui.min.js"></script> 
<script type="text/javascript" src="myfile.js"> </script> 

<?php 

MYSQL QUERY 

while(fetch) 
{ 
<div id="<?php echo "slider" . $data['id']; ?>"> </div> 
<input type="text" id="<?php echo "amount" . $data['id']; ?>"> 

    <script type="text/javascript"> 
       initSlider("<?php echo $data['id'];?>"); 
    </script> 
} 

?> 
</body> 
</html 

myfile.js

function initSlider(i){ 
     var name = "#slider"+i; 
     if($(name)){ 
     $(name).slider({ 
      value:100, 
      min: 5, 
      max: 300, 
      step: 5, 
      slide: function(event, ui) { 
       $("#amount"+i).val(ui.value); 
      } 
     }); 
     $("#amount"+i).val($("#slider" + i).slider("value")); 
     } 
    }