jQuery UI 多个带有金额的滑块

Question

我在一页上设置了一些滑块，但是当您滑动 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”元素 X 次附加“slide”事件的处理程序（其中 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 。我已经测试过了，现在看起来没问题:)

Answer 2

您每次都将 .amount 用作 元素的类。由于类通常不是唯一的，因此它会获取具有该类的所有 元素并更改其值。因此，您应该指示它应该在当前容器内查找具有 amount 类的跨度（使用 .find() 方法。（或者您可以使用每个滑块都有唯一的 id。）

因此，如果您想一遍又一遍地使用相同的 HTML，您可以简单地执行以下操作：

$(document).ready(function() {
    $(".slider").each(function() {
        // $this is a reference to .slider in current iteration of each
        $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
               $(this).parent().find(".amount").html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]);
            }
        });
        $(".amount").html( "$" + $(".slider-range").slider("values", 0 ) + " - $" + $(".slider-range").slider("values", 1 ));
    });
});

因此，您还应该更改 HTML 并添加跨度：

<div class="slider">
      <b>Price range:</b>
      <span class="amount">0</span>
      <div class="slider-range"></div> 
</div>

<div class="slider">
      <b>Amount range:</b>
      <span class="amount">0</span>
      <div class="slider-range"></div> 
</div>

请注意，我更改了 val() 到在 JQuery 脚本中使用 html() 来填充跨度内容，您可以阅读有关 html() 功能的更多信息 此处。

可以在 在 JSFiddle 上这应该可以解决您的问题。 问题！