範囲スライダーで要素のクラスを追加または削除

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