Machen Sie Klassen von Datenattributen, die mehrere Elemente enthalten

Question

Art von einem harten Titel, sorry.

Ich habe eine Daten attr Farbe genannt. z.B. <div class="square" data-colors="opt1, opt2, opt4">

Ich möchte dieses Attribut erhalten und es in 3 verschiedene Klassen teilen. Also ich bin links mit so etwas wie .opt1 .opt2 .opt3

ich zu diesem Punkt aus Versehen bekam:

var colors = $('.square.active').data('colors'), 
    splitColors = colors.split(','); 

     console.log(splitColors); 

die eine Reihe von meinen Farben zurück:

["opt1", " opt2", " opt4"] 

Ich bin mir nicht sicher, dass dies das ist richtigen Weg, um Dinge zu tun, fühle ich mich, als würde ich mehr Arbeit für mich selbst machen. Gibt es einen einfacheren Weg, dies zu tun? Oder sollte ich diesen Weg fortsetzen? Wenn ja, wie bekomme ich jedes Element im Array und verwandle es in eine brauchbare Klasse?

ich ein Beispiel hier haben, können Sie die Ergebnisse in der Konsole sehen: https://jsfiddle.net/7z972udn/

einen Platz Klicken, drücken Sie die Taste, die Sie mit dem Array mit den Farben auf diesem Platz zugewiesen zurückgibt.

Mit einem Klick auf die Schaltfläche möchte ich die versteckte Klasse aus den Elementen im Array entfernen. Ich würde annehmen, dass das Endergebnis in etwa so aussehen würde: $('.opt1, .opt2, .opt3').removeClass('hidden');

Ich bin mir einfach nicht sicher, wie ich zu dem Punkt komme, von dem aus ich hier bin.

Answer 1

Wenn Sie vorhaben, Ihren Weg zu halten

Sie die Zeiträume hinzufügen könnte (.) Als Präfix

<div class="square" data-colors=".opt1, .opt2, .opt4"> 

dann die Art und Weise geteilt Sie

tun

var colors = $('.square.active').data('colors'); 
splitColors = colors.split(','); 

Dann wandeln Sie das geteilte Farbfeld in eine einzige Zeichenkette um join() Funktion

splitColorString = splitColors.join(); 

dies die Zeichenfolge

'.opt1, .opt2, .opt3' 

Dann tun die jQuery entfernen Klasse Sache

$(splitColorString).removeClass('hidden');