Как клонировать и инициализировать ползунки jQuery с помощью jQuery.each ()

0

Я пытаюсь клонировать ползунок диапазона jQuery (максимум 5 раз), чтобы сохранить одно и то же имя (для публикации в виде массива).

Мне удалось получить эту работу, но первый слайдер - единственный, который будет работать. Я пробовал использовать $ 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>
    
задан tomantford 27.05.2016 в 13:49
источник

1 ответ

0

1) Используйте один идентификатор DOM на одной странице;
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));
});

пример

    
ответ дан Codd Wrench 27.05.2016 в 14:49
источник