Question

这是整个测试代码。

最后，我将有许多滑块和输入字段具有不同的ID（没有模式）所以我想使用$ this或传递vars而不是一堆重复的代码。

滑块有3个最大值：5,10,15

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/jquery-ui.css" type="text/css" media="all" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui.min.js" type="text/javascript"></script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <script>
    $(function() {
        $( "#slider1" ).slider({
            value:0, min: 0, max: 5, step: 1,
            slide: function( event, ui ) {
                $( "#amount1" ).val( ui.value );
            }
        });
        $( "#amount1" ).val( $( "#slider1" ).slider( "value" ) );

        $( "#slider2" ).slider({
            value:0, min: 0, max: 10, step: 1,
            slide: function( event, ui ) {
                $( "#amount2" ).val( ui.value );
            }
        });
        $( "#amount2" ).val( $( "#slider2" ).slider( "value" ) );

        $( "#slider3" ).slider({
            value:0, min: 0, max: 15, step: 1,
            slide: function( event, ui ) {
                $( "#amount3" ).val( ui.value );
            }
        });
        $( "#amount3" ).val( $( "#slider3" ).slider( "value" ) );
    });
    </script>
    <style>
    .steps {
        border: 1px solid transparent;
        position: relative; 
        height: 30px;
    }
    .tick { 
        border: 1px solid transparent;
        position: absolute;
        width: 1.2em;
        margin-left: -.6em;
        text-align:center;
        left: 0;
    }
    .ui-slider .ui-slider-handle {
        width: 2em;
        height: 3em;
        top: -1.4em;
        margin-left: -1em;
    }
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        border: 2px solid #d3d3d3;
        background: #333;
    }
    </style>
</head>
<body style="font-size: small;">

    <div style="display:block;margin:100px auto;padding:0 8%">
        <input type="text" id="amount1" style="border:0 none">

        <div id="slider1"></div>

        <div class="steps">
            <?php
            for ($i=0, $t=5; $i<=$t; $i++) {
                echo '<span class="tick" style="left:'.(100/$t*$i).'%;';
                if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;';
                echo '">|<br>'.$i.'</span>';
            }
            ?>
        </div>
    </div>

    <div style="display:block;margin:100px auto;padding:0 8%">
        <input type="text" id="amount2" style="border:0 none">

        <div id="slider2"></div>

        <div class="steps">
            <?php
            for ($i=0, $t=10; $i<=$t; $i++) {
                echo '<span class="tick" style="left:'.(100/$t*$i).'%;';
                if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;';
                echo '">|<br>'.$i.'</span>';
            }
            ?>
        </div>
    </div>

    <div style="display:block;margin:100px auto;padding:0 8%">
        <input type="text" id="amount3" style="border:0 none">

        <div id="slider3"></div>

        <div class="steps">
            <?php
            for ($i=0, $t=15; $i<=$t ; $i++) {
                echo '<span class="tick" style="left:'.(100/$t*$i).'%;';
                if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;';
                echo '">|<br>'.$i.'</span>';
            }
            ?>
        </div>
    </div>

</body>
</html>

Answer 1

您应该将滑块data属性设置为保持滑块值，最小值和最大值等，以及不同的class然后初始化滑块。一个例子是：

<div style="display:block;margin:100px auto;padding:0 8%">
    <input type="text" id="amount3" style="border:0 none" class="slider_value">

    <div id="slider3" class="slider_container" data-value="0" data-min="0" data-max="15" data-steps="1"></div>

    <div class="steps">
        <?php
        for ($i=0, $t=15; $i<=$t ; $i++) {
            echo '<span class="tick" style="left:'.(100/$t*$i).'%;';
            if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;';
            echo '">|<br>'.$i.'</span>';
        }
        ?>
    </div>
</div>

然后：

$(function(){
    var value, step, min, max, input;

    $('.slider_container').each(function(){
        input = $(this).prev('.slider_value');
        value = $(this).data('value');
        step  = $(this).data('steps');
        min   = $(this).data('min');
        max   = $(this).data('max');

        $(this).slider({
            value: value, 
            min: min, 
            max: max, 
            step: step,
            slide: function(event, ui) {
                $(this).prev('.slider_value').val(ui.value);
            }
        });

        input.val($(this).slider("value"));
    });
});

Answer 2

我认为循环会减少重复代码：

var numElements = 3;
for (var i = 0; i < numElements; i++) {
    var $slider = $('#slider'+i);
    var $amount = $('#amount'+i);
    $slider.slider({
       value:0, min: 0, max: 5, step: 1,
       slide: function( event, ui ) {
           $amount.val( ui.value );
       }
    });
    $amount.val( $slider.slider( "value" ) );
}

如何使用$ this或传递vars来减少javascript代码

2 个答案: