Добавить или удалить класс элементов с помощью ползунка диапазона

У меня есть скрипт, использующий ползунок диапазона, который изменяет значение цены и количество людей в зависимости от положения ползунка. Использование предназначено для ценообразования офисных помещений в зависимости от количества людей. Вот рабочий пример здесь, в этой ручке:

http://codepen.io/anon/pen/OXPvZO

С помощью ползунка есть значки людей (черные блоки в примере), которые предназначены для выделения активного класса в зависимости от количества. Таким образом, когда вы пролистываете, активный класс будет применяться к правильному количеству значков или удаляться в зависимости от направления слайда. У меня возникли проблемы с определением метода обработки такого типа действий.

Вот JS, который я использую для обработки того, что есть сейчас:

jQuery( function( $ ) {
    var personCount = 12;

    for ( i = 0; i < personCount; i++ ) {
        $( '.person-count' ).append( '<span class="person person-' + i + '" />' );
    };

    $( '[data-slider]' ).on( 'slider:ready slider:changed', function( event, data ) {
        $( this ).parents( '.price-slider' )
            .find( '.person-integer' ).html( data.count ).end()
            .find( '.js-price' ).html( data.value ).end()
            .find( '.person-' + data.count ).addClass( 'is-active' );
    });
});

Следует отметить одну вещь (как видно из HTML в Codepen): счетчик данных пропускает два после 8. Таким образом, он увеличивается с 8 до 10 и затем до 12. Это, кажется, отбрасывает методы, которые я пробовал ранее.

Если у кого-то есть какие-либо предложения или методы, которые я мог бы использовать здесь, я был бы очень признателен.


jquery rangeslider
person Ryan Palmer    schedule 01.06.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Причина, по которой он пропускается, заключается в том, что вам не хватает 9 и 11 в data-slider-count. Поскольку вы использовали цикл для создания своих элементов, он не может найти элементы с классом «.person-11» или «.person-9» в измененном событии.

Вы можете получить фактические значения из data-slider-count в соответствии с приведенным ниже кодом и использовать их для создания элементов span, которые будут найдены на основе data.count.

jQuery(function($) {

  //get values from slider
  var personCounts = $('.slider-input').attr('data-slider-count').split(',');

  //Create span elements based on values and not count
  for (i = 0; i < personCounts.length; i++) {
    $('.person-count').append('<span class="person person-' + personCounts[i] + '" />');
  };

  //these two should be active based on the default value of the slider
  $('.person-1').addClass('is-active');
  $('.person-2').addClass('is-active');

  $('[data-slider]').on('slider:ready slider:changed', function(event, data) {
    $('.person-integer').html(data.count);
    $('.js-price').html(data.value);
    $('.person-' + data.count).addClass('is-active');
  });
});
person majita    schedule 01.06.2016