Hinzufügen Klasse aktiv zu mehreren divs basierend auf ausgewählten Wert

Question

Ich habe bereits die Basis-Funktionalität für diese eingerichtet, aber müssen sie leicht ändern, und ich bin ratlos. Mein aktueller Code fügt eine "aktive" Klasse zu einem Div hinzu, basierend auf dem Wert eines Select-Dropdowns. Was ich tun muss, ist die Klasse aktiv zu mehreren divs basierend auf mehreren Werten in der Auswahl hinzufügen.

Wenn jetzt der Auswahlwert gleich '.recs' ist, erhält das div mit der Klasse 'recs' die Klasse 'aktiv' bei Änderung der Auswahl. Was ich tun muss, ist: Wenn der Auswahlwert mehrere Werte wie ".recs .green .rep" hat, dann füge die Klasse "active" allen divs mit der Klasse recs, green oder rep hinzu.

Mein aktueller Code folgt:

jQuery:

$("select[name='wayfinding-select']").change(function(){ 
    select_changed(); 
}); 

function select_changed(){ 
jQuery("a[class*='wayfinding-btn']").each(function(){ 
    jQuery(this).removeClass('active'); 
}); 
jQuery("select[name='wayfinding-select']").each(function(){ 
    var selected = jQuery(this).val(); 
    jQuery(selected).addClass('active'); 
    console.log(selected); 
}); 
} 

Markup:

<select name="wayfinding-select" class="form-control form-group wayfinding-select"> 
<option value=".recs .green .rep"> 
    Add class active to all 3 divs 
</option> 
<option value=".recs"> 
    Add class active to RECs div only 
</option> 
<option value=".recs .green"> 
    Add class active to RECs and Green divs 
</option> 
</select> 

<div class="wayfinding-btn recs">Renewable Energy Certificates</div> 
<div class="wayfinding-btn green">Green Programs</div> 
<div class="wayfinding-btn rep">Renewable Energy Procurement</div> 

Thank you!

Answer 1

Zuerst ein Array mit den Klassen des gewählten Wertes

var selected = $(this).val(); 
selected = selected.split(" "); 

Zweitens schaffen verbinden Sie sie in einem String durch Komma getrennt alle Klassen in einem String mit Komma getrennt zu erhalten.

selected = selected.join(','); 

Drittens verwenden Sie die Zeichenfolge als jQuery-Selektor der Klasse

$(selected).addClass("active"); //for example $(".recs,.green").addClass("active") 

Answer 2

Sie sollten in der Lage sein, dies zu tun mit der Split-Funktion hinzuzufügen. Dies führt dazu, dass ein Array an die ausgewählte Variable zurückgegeben wird, und dann können Sie einfach die $ .each-Funktion verwenden, um die Werte zu durchlaufen, die sich im ausgewählten Array befinden.

Es würde wie folgt aussehen:

jQuery("select[name='wayfinding-select']").each(function() { 
    var selected = jQuery(this).val().split(' '); 
    $.each(selected, function(index, value) { 
     jQuery(value).addClass('active'); 
    }); 
    console.log(selected); 
}); 

Auch bemerkte den Abschnitt des Codes verantwortlich für die Klassen Zurücksetzen wurde ein Anker anstelle eines div Targeting. Ich habe das geändert, damit das Spiel richtig funktioniert, aber ich bin mir nicht sicher, ob es Pläne gab, in Zukunft die DIVs auf Anker umzustellen.

In jedem Fall ist hier eine Geige aktualisiert

https://jsfiddle.net/sm1215/z75tom8v/