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

新しい HTML5 スライダーを使用してみませんか? 簡単に同じ作業ができると思います。見てみましょう: http://www.html5tutorial.info/html5-range.php

于 2013-07-19T09:57:52.213 に答える