jQuery UI несколько слайдеров с количеством - PullRequest
Новая
       12

jQuery UI несколько слайдеров с количеством

3 голосов
/ 24 августа 2011

У меня есть несколько ползунков на 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>

Ответы [ 2 ]

6 голосов
/ 24 августа 2011

Не проверял, но я уверен, что проблема в том, чтобы не использовать какие-либо области видимости при поиске элементов ".slider-range" и ".amount". Как вы это делаете, вы в основном прикрепляете обработчик для события «слайд» для каждого элемента «.amount» 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));
});

РЕДАКТИРОВАТЬ : Я забыл поставить var перед объявлением $ этой переменной. Я проверил это, и теперь это выглядит хорошо:)

3 голосов
/ 24 августа 2011

Вы используете .amount как класс каждый раз для элемента <input />. Поскольку классы обычно не уникальны, он принимает все <input /> элементы с этим классом и изменяет его значение. Поэтому вы должны указать, что он должен искать диапазон с классом amount INSIDE вашего текущего контейнера (используйте метод .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 и добавить диапазон: 

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

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

...