while循环中的jquery函数答案

【问题标题】：Jquery function in while loopwhile循环中的jquery函数
【发布时间】：2014-10-13 17:14:36
【问题描述】：

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

【问题讨论】：

ui.handle.data('id') 的价值能给你带来什么？请注意，您的代码的最后一行将不起作用，您需要遍历所有 .slider 元素并将正确的值放入正确的 #amount 框中。
undefined is not a function，这是我唯一能看到的。我知道最后一行。循环有效，但试图获取此循环中的最后一个 ID
console.log(ui.handle); 的结果是什么？你有在线测试页面吗？
我每次在滑动条上移动一毫米时都会看到这条线：<span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 33.8983050847458%;"></span>

标签： javascript php jquery

【解决方案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);
}

在代码中 count 是标签的计数 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>";此代码已声明计数值；

【讨论】：

问题是我有：
,
,
未排序。 + 好像 JQuery 函数不能循环...
我怎样才能得到id=slider+i的最后一个i

【解决方案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();
您可以添加数据属性来获取正确的 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);
      }

【讨论】：

上课似乎更容易！但是我总是需要把滑块的值放在右边的amount div 中。选项2是我不想这样做的方式，但是如何将id传递给函数？
@gr3g 我添加了一个简单的示例，但您必须检查如何准确访问操纵的滑块。好像是ui.handle。
在尝试 ui.handle 时，我在移动滑块时有undentified is not a function。通过其他尝试，我的 javascript 控制台中有数字...
@gr3g 听起来你的 99% 都在那里。如果您仍然卡住，您应该将编辑后的代码和控制台中的结果放在原始问题下方。

【解决方案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

我的文件.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" ));
       }
    }

【讨论】：