javascript - 具有不同最大值的jquery slider 不起作用

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 不起作用，两个 slider 都显示 100 作为最大值。但我首先想要最大值为 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 获取该值

$(".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