Fatal编程技术网
  • javascript/
  • 如何使用$this或传递vars减少javascript代码

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

javascript php jquery jquery-ui

如何使用$this或传递vars减少javascript代码,javascript,php,jquery,jquery-ui,Javascript,Php,Jquery,Jquery Ui,下面是整个测试代码 最后，我将有许多具有不同ID（无模式）的滑块和输入字段，因此我希望使用$this或pass 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/j

下面是整个测试代码

最后，我将有许多具有不同ID（无模式）的滑块和输入字段，因此我希望使用$this或pass 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>


$（函数（）{
$（“#滑块1”）.滑块({
值：0，最小值：0，最大值：5，步长：1，
幻灯片：功能（事件、用户界面）{
$（“#amount1”）.val（ui.value）；
}
});
$（“#amount1”）.val（$（“#slider1”）.slider（“value”）；
$（“#滑块2”）.滑块({
值：0，最小值：0，最大值：10，步长：1，
幻灯片：功能（事件、用户界面）{
$（“#数量2”）.val（ui.value）；
}
});
$（“#数量2”）.val（$（“#滑块2”）.slider（“值”）；
$（“#滑块3”）.滑块({
值：0，最小值：0，最大值：15，步长：1，
幻灯片：功能（事件、用户界面）{
$（“#数量3”）.val（ui.value）；
}
});
$（“#amount3”）.val（$（“#slider3”）.slider（“value”）；
});
.步骤{
边框：1px实心透明；
位置：相对位置；
高度：30px；
}
.tick{
边框：1px实心透明；
位置：绝对位置；
宽度：1.2米；
左边距：-.6em；
文本对齐：居中；
左：0；
}
.ui滑块.ui滑块句柄{
宽度：2米；
高度：3em；
顶部：-1.4em；
左边距：-1米；
}
.ui状态默认值.ui小部件内容.ui状态默认值.ui小部件标题.ui状态默认值{
边框：2px实心#D3；
背景：#333；
}
我认为循环可以减少重复代码：

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

var numElements=3；
对于（变量i=0；i
您应该为滑块提供
数据
属性，以保存滑块值、最小值和最大值等，以及一个不同的
类
，然后在其上初始化滑块。例如：

<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>
如上所述：#slider和#amount将是一组其他ID。“一堆其他ID”并不表示ID没有遵循模式——我给出的答案简化了您的示例代码，这就是我们需要处理的全部内容。如果你想发布更具体的细节，我可以修改我的回答编辑过的原文，以表明没有最终IDS的模式，已经接近了！但它仅在最后一个滑块移动时更新最后一个输入字段。我删除了slider3，当slider2成为最后一个时，结果是一样的。仅更新最后一个滑块输入。您确定使用的是最新代码吗？我已经编辑了我的文章很多次，最后一次编辑必须完全使用
slide
function.SWEET！看来我一定是在你做改变时抄下了你的答案。这非常有效。以前我可以使用onupdate，然后使用
document.getElementById（“slider3”）.value=data['xyz']。如何使用上面的代码设置滑块值？（我在这里学习）。或者这应该作为一个新问题发布？您仍然可以使用
onupdate
事件，只是现在您将输入引用为
$（this）.prev（'.slider_value'）.val（data['xyz']）
。这将得到具有
class=“slider\u值”
的前一个元素。如果需要以编程方式更改某个滑块的值，仍然可以使用
id
获取所需的滑块，如
$（“#slider3”）。slider（'value'，7）-这将滑块3的值设置为7。

$(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"));
    });
});