jQuery UI несколько ползунков с количеством

У меня есть настройка некоторых ползунков на 1 странице, но когда вы двигаете 1 ползунок, количество всех ползунков меняется...

Как я могу сделать слайдер отдельно друг от друга? И если это не mutch работа, как я могу использовать span вместо inputfield для отображения суммы?

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>
2 3
jquery uislider

2 ответа:

Не проверял его, но я почти уверен, что это вопрос не использования какого-либо определения области поиска ".ползунок-диапазон" и".количество " элементов. То, как вы это делаете, вы в основном прикрепляете обработчик для события" слайд "для каждого".сумма " элемент X раз (где X-число ".слайдер " элементы на странице).

Мое исправление: 

$(".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));
});

EDIT : я забыл поставить var перед объявлением переменной $this. Я проверил его, и теперь он выглядит нормально :)

6

Вы используете .amount в качестве класса каждый раз для вашего элемента <input />. Поскольку классы обычно не уникальны, он берет все элементы <input /> с этим классом и изменяет его значение. Поэтому вы должны указать, что он должен искать span с классом amount внутри вашего текущего контейнера (используйте метод .find(). (Или вы можете использовать уникальный идентификатор для каждого слайдера.)

Поэтому, если вы хотите использовать один и тот же 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 и добавить span: 

<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() на html() в вашем скрипте JQuery, чтобы заполнить содержимое span. Подробнее о функциях html() можно прочитать здесь.

Полный рабочий пример этого кода можно найтиздесь на JSFiddle . Это должно решить вашу проблему!

3