0

我想在我的页面中使用这个jquery 滑块。我想在页面上多次加载滑块。它对我不起作用。这是我的代码。

    <script>
    jQuery(function() {
<?php 
    for( $i =0; $i<3;$j++){ 
    ?>  
        jQuery( "#slider-range-max+<?php echo $i?>" ).slider({
        range: "max",
        min: 1,
        max: 10,
        value: 2,
        slide: function( event, ui ) {
        jQuery( "#amount+<?php echo $i?>" ).val( ui.value );
    }
});
    jQuery( "#amount+<?php echo $i?>" ).val( jQuery( "#slider-range-max+<?php echo $i?>" ).slider( "value" ) );
<?php } ?>
});
</script>
<?php 
for( $j =0; $j<3;$j++){  ?>
<p>
     <label for="amount<?php echo $i?>">Minimum number of bedrooms:</label>
    <input type="text" id="amount<?php echo $i?>" style="border: 0; color: #f6931f; font-weight: bold;" />
    </p>
<div id="slider-range-max<?php echo $i?>"></div>
<?php  } ?>

这是上面代码的输出

<script>
jQuery(function() {

jQuery( "#slider-range-max0" ).slider({
range: "max",
min: 1,
max: 10,
value: 2,
slide: function( event, ui ) {
jQuery( "#amount0" ).val( ui.value );
}
});
jQuery( "#amount0" ).val( jQuery( "#slider-range-max0" ).slider( "value" ) );

jQuery( "#slider-range-max1" ).slider({
range: "max",
min: 1,
max: 10,
value: 2,
slide: function( event, ui ) {
jQuery( "#amount1" ).val( ui.value );
}
});
jQuery( "#amount1" ).val( jQuery( "#slider-range-max1" ).slider( "value" ) );

jQuery( "#slider-range-max2" ).slider({
range: "max",
min: 1,
max: 10,
value: 2,
slide: function( event, ui ) {
jQuery( "#amount2" ).val( ui.value );
}
});
jQuery( "#amount2" ).val( jQuery( "#slider-range-max2" ).slider( "value" ) );
});
</script>
<p>
 <label for="amount3">Minimum number of bedrooms:</label>
<input type="text" id="amount3" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range-max3"></div>
<p>
 <label for="amount3">Minimum number of bedrooms:</label>
<input type="text" id="amount3" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range-max3"></div>
<p>
 <label for="amount3">Minimum number of bedrooms:</label>
<input type="text" id="amount3" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range-max3"></div>
4

2 回答 2

0

主要问题是您重复了相同的IDs3 次。jQuery 不知道该拿哪一个。简单地做IDs独一无二的。

在您的 PHP 文件中的 HTML 部分使用$j而不是$i. 否则，正如您在 HTML 输出$i中看到的那样，会3导致重复IDs

小提琴

于 2013-07-19T09:54:22.413 回答
0

为什么不尝试使用新的 HTML5 滑块？我认为你可以很容易地用它做同样的工作。看看： http ://www.html5tutorial.info/html5-range.php

于 2013-07-19T09:57:52.213 回答