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 。我已经测试了它，现在它看起来还不错:)。

Answer 2

您每次使用.amount作为<input />元素的班级。由于类通常不是唯一的，因此它会使用该类的所有<input />元素并更改其值。因此，您应该指出它应该在当前容器中查找金额类的范围（使用.find()方法。（或者您可以使用唯一ID < / strong>对于每个滑块。）

因此，如果你想反复使用相同的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>

请注意，我在JQuery脚本中将val()更改为html()以填充范围内容。您可以详细了解html()功能here。

可以找到此代码的完整工作示例here on JSFiddle。这应该可以解决你的问题！

jQuery UI多个滑块与金额

2 个答案: