Question

html文件

<h1>HTML Slider Test</h1>
<div class="slider">
    <script>
        var a=10;
    </script>
</div>
<p>Your slider has a value of 
    <span class="slider-value"></span>
</p>
<div class="slider">
    <script>
        var a=100;
    </script>
</div>
<p>Your slider has a value of 
    <span class="slider-value"></span>
</p>

jquery文件

$(".slider").slider({
    value: 1,
    min: 0,
    max: a,
    step: 1,
    slide: function (event, ui) {
        $(this).next().find('span.slider-value').html(ui.value);
    }
});

$(".slider-value").html($('.slider').slider('value'));

我目前在两个div中有两个脚本，但a的值为10和100，并且它被赋值为slider的最大值。但是a = 10不起作用两个滑块都显示100为max.but i want first最大为10，第二为100。

http://jsfiddle.net/s7uxtbu7/2/

Answer 1

这是一个实际可行的解决方案，使用HTML中的数据属性

<h1>HTML Slider Test</h1>

<div class="slider" data-max="10"></div>

<p>Your slider has a value of <span class="slider-value"></span></p>

<div class="slider" data-max="100"></div>

<p>Your slider has a value of <span class="slider-value"></span></p>

然后为每个滑块获取该值

$(".slider").each(function() {
    $(this).slider({
        value : 1,
        min   : 0,
        max   : $(this).data('max'),
        step  : 1,
        slide : function (event, ui) {
            $(this).next().find('span.slider-value').html(ui.value);
        }
    });
});

FIDDLE

jquery滑块具有不同的最大值不起作用

1 个答案: