Hinzufügen oder Entfernen von Klassen für Elemente mit Bereichsschieberegler

Question

Ich habe ein Skript, das einen Bereichsschieberegler verwendet, der einen Preiswert und eine Personenanzahl basierend auf der Position des Schiebereglers ändert. Die Verwendung ist für die Preisgestaltung für Büroräume basierend auf der Anzahl der Personen. Hier ist das Arbeitsbeispiel hier in diesem Stift:

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

Mit dem Schieberegler, gibt es Menschen Symbole (schwarze Blöcke in diesem Beispiel), die dazu bestimmt ist, mit einer aktiven Klasse markieren je nach Zählung. Wenn Sie also durch das Fenster gleiten, wird die aktive Klasse auf die Anzahl der Symbole angewendet oder je nach Schieberichtung entfernt. Ich habe Probleme beim Bestimmen einer Methode für diese Art von Aktion.

Hier ist die JS, die ich zu behandeln bin mit, was es jetzt ist:

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

Das einzige, was zu beachten (wie in der HTML-Code in der Codepen gesehen), ist die Datenzählung zwei nach 8 überspringt. Geht also von 8 zu 10 zu 12. Das scheint die Methoden, die ich vorher ausprobiert habe, abzuschütteln.

Wenn jemand irgendwelche Vorschläge oder Methoden hat, die ich hier verwenden könnte, würde ich sehr dankbar sein.

Answer 1

Der Grund dafür ist, dass Sie 9 und 11 im Daten-Slider-Count vermissen. Da Sie eine Schleife zum Generieren Ihrer Elemente verwendet haben, kann sie im geänderten Ereignis keine Elemente mit der Klasse ".person-11" oder ".person-9" finden.

Sie können die tatsächlichen Werte aus Daten-Slider-Count wie im folgenden Code erhalten und sie verwenden, um span-Elemente zu generieren, die basierend auf data.count gefunden werden.

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