jQuery UI多个滑块与金额

Question

我在1页上设置了一些滑块但是当你滑动1个滑块时,所有滑块的数量都会改变...

如何让滑块彼此分开？如果不是变异工作,我如何使用跨度而不是输入字段来显示金额？

JS:

$(".slider").each(function () {
    $(".slider-range").slider({
        range: true,
        min: 0,
        max: 100,
        values: [30, 60],
        slide: function (event, ui) {
            $(".amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
        }
    });
    $(".amount").val("$" + $(".slider-range").slider("values", 0) + 
                     " - $" + $(".slider-range").slider("values", 1));
});      

HTML:

 <div class="slider">
      <b>Price range:</b>
      <input type="text" class="amount" />
      <div class="slider-range"></div> 
 </div>

Answer 1

没有测试过,但我很确定这是一个在找到".slider-range"和".amount"元素时不使用任何类型的范围的问题.你这样做的方式,你基本上为每个".amount"元素的"slide"事件附加处理器X次(其中X是页面上的".slider"元素的数量).

我的修复:

$(".slider").each(function () {
    // $this is a reference to .slider in current iteration of each
    var $this = $(this);
    // find any .slider-range element WITHIN scope of $this
    $(".slider-range", $this).slider({
        range: true,
        min: 0,
        max: 100,
        values: [30, 60],
        slide: function (event, ui) {
            // find any element with class .amount WITHIN scope of $this
            $(".amount", $this).val("$" + ui.values[0] + " - $" + ui.values[1]);
        }
    });
    $(".amount").val("$" + $(".slider-range").slider("values", 0) + " - $" + $(".slider-range").slider("values", 1));
});    

编辑:我在声明$ this变量之前忘了把var.我已经测试过了,现在看起来还不错:)