Question

下面的代码会创建一个类似于此的滑块：

我添加了一些jquery来附加副本，这些副本通过复制“form”元素来一个接一个地编码。麻烦的是，副本不起作用，因为（我认为）创建它们的jquery只引用div id“slider-range”。此外，我很确定无论如何都要制作“div”元素的副本。

我认为每个附加元素后面都需要一个数字，如“slider-range1”，然后是2等，以使它们唯一，但是顶部的jquery代码仍然不会引用它们。这里有简单的解决方案吗？也许我正以错误的方式接近它。想法？

谢谢！

<?php
print_r($_POST);

echo <<<END
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Range slider</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) +
      " - " + $( "#slider-range" ).slider( "values", 1 ) );
  });
  </script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("form").clone().appendTo("body");
  });
});
</script>
</head>
<body>
<button>Clone all form elements, and append them to the body element</button>
<form name="feedback_form" action="" method="post">
<p>
  <label for="amount">Time range:</label>
  <input type="text" name="amount" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>

<div id="slider-range"></div>
 <input type="submit" name="formsubmit" value="Update"><p></p>
</form>

</body>
</html>
END;   
?>

试图附加jquery滑块元素的副本

0 个答案: