如何使用 jQuery.each() 克隆和初始化 jQuery 滑块

Question

我正在尝试克隆一个 jQuery 范围滑块（最多 5 次）以保留相同的名称（以 post 作为数组）。

我已经设法让它工作了，但是第一个滑块是唯一可以工作的。我试过使用 $this:

$(".slider").each(function () {

        $this = $(this);

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

如果我在单击按钮克隆最后一个范围滑块后检查元素，我得到：

<div id="entry1" class="clonedInput">
<div class="slider">
<p>
    <label for="amount">Age range:</label>
    <input id="amount" readonly="" name="amount" style="border:0; color:#f6931f; font-weight:bold;" type="text">
</p>

<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider-range"><div style="left: 3.65854%; width: 10.9756%;" class="ui-slider-range ui-widget-header ui-corner-all"></div><span style="left: 3.65854%;" class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"></span><span style="left: 14.6341%;" class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"></span></div>
</div>

</div>

<div style="display: block;" id="entry2" class="clonedInput">
<div class="slider">
<p>
    <label for="amount">Age range:</label>
    <input id="amount" readonly="" name="amount" style="border:0; color:#f6931f; font-weight:bold;" type="text">
</p>

<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider-range"><div style="left: 3.65854%; width: 10.9756%;" class="ui-slider-range ui-widget-header ui-corner-all"></div><span style="left: 3.65854%;" class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"></span><span style="left: 14.6341%;" class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"></span></div>
</div>

</div>

Answer 1

1) 在一页中使用一个DOM id；
2）如果要使用类的重复；
3) 使用 .find() 或 .children() 查找子元素。

像这样：

var $this = $(this);
var amount = $this.find(".amount");
var slider = $this.find(".slider-range")
   .slider({
    range: true,
        min: 18,
        max: 100,
        values: [21, 30],
        slide: function (event, ui) {
            amount.val(ui.values[0] + " - " + ui.values[1]);
        }
    });

amount
    .val(slider.slider("values", 0) 
        + " - " 
        + slider.slider("values", 1));
});

example

如何使用 jQuery.each() 克隆和初始化 jQuery 滑块

How to clone and initialize jQuery Sliders with jQuery.each()

html

javascript

jquery

jquery-ui-slider