Question

我是Jquery的新手，必须在一个页面中显示多个JQuery滑块。

每次结果来自MySQL请求时，我都必须显示一个滑块我可以显示一个滑块，但不能显示多个滑块，因为我无法在javascript中更改ID的名称。
我也无法多次调用此功能...请帮忙。

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" ));
  });

//编辑

滑块与所有元素的类连接，但我无法将滑块的正确值放入amount。
我有几个选项可以使当前滑块的ID移动，但它们都不起作用：

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

您应该为要附加滑块的元素添加一个类，以便您可以一次将它们附加到所有元素：

<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();
您可以添加数据属性以获取正确的ID，然后您可以使用它来定位正确的数量;
您可以将滑块和金额的组合包装在容器元素中，以便您可以轻松定位正确的金额。这比第一个选项更灵活，因为元素不必彼此相邻。

请注意，您必须检查内部函数中的$(this)是否仍包含对操纵滑块div的引用。文档应该清除它。

修改：有关第二个选项的更多信息：

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 2

在这里你可以尝试这个代码:)

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);
}

代码计数中的

是标记 div id = slider + 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>";此代码已声明为count;

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" ));
       }
    }

while循环中的Jquery函数

3 个答案: