범위 슬라이더가있는 요소에서 클래스 추가 또는 제거

Question

슬라이더의 위치를 ​​기준으로 가격 값과 사람 수를 변경하는 범위 슬라이더를 사용하는 스크립트가 있습니다. 사용법은 사무실 공간에 대한 가격 책정 방법입니다. 다음은 작업 예는이 펜에 여기 : 슬라이더와

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

, 활성 클래스 개수에 따라 함께 강조하기위한 것입니다 사람들이 아이콘 (예 검은 블록)이있다. 따라서 슬라이드 할 때 활성 클래스는 적절한 아이콘 수에 적용되거나 슬라이드 방향에 따라 제거됩니다. 이 유형의 작업을 처리 할 방법을 결정하는 데 문제가 있습니다.

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'); 
    }); 
}); 

합니다 (Codepen의 HTML에서와 같이)주의해야 할 한 가지는, 데이터 수가 8 후 2를 건너 뛰고 있습니다 :

여기에 내가 지금 거기에 무엇을 처리하기 위해 사용하고있어 JS입니다. 그래서 8에서 10에서 12로 바뀝니다. 이전에 시도한 방법을 버리는 것 같습니다.

누구나 내가 여기 사용할 수있는 제안이나 방법이 있다면, 나는 대단히 감사 할 것입니다.

Answer 1

건너 뛰는 이유는 데이터 슬라이더 개수에 9와 11이 없기 때문입니다. 루프를 사용하여 요소를 생성했기 때문에 변경된 이벤트에서 클래스 '.person-11'또는 '.person-9'가있는 요소를 찾을 수 없습니다.

아래 코드에 따라 data-slider-count에서 실제 값을 가져 와서이를 사용하여 data.count를 기반으로 찾을 span 요소를 생성 할 수 있습니다.

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'); 
    }); 
});