複数の項目を含むデータ属性からクラスを作成する

Question

タイトルに難しい種類のもの、申し訳ありません。

私は色というデータattrを持っています。例えば<div class="square" data-colors="opt1, opt2, opt4">

この属性を取得し、3つの異なるクラスに分割したいと考えています。

私の色の配列を返します

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

     console.log(splitColors); 

：

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

私はこれがあるか分からないので、私は、私は偶然、この時点になった.opt1 .opt2 .opt3

のようなものが残っています私は自分のためにもっと仕事をしているように感じています。これを行う簡単な方法はありますか？または私はこの方法を続けるべきですか？もしそうなら、どのように配列の各項目を取得し、それを使用可能なクラスにするのでしょうか？私はここに例があり

は、コンソールに結果を見ることができます：https://jsfiddle.net/7z972udn/

は、広場をクリックしてその四角に割り当てられた色を持つ配列であなたを返すボタンを押してください。

ボタンをクリックすると、配列のアイテムから隠れたクラスを削除したいと思います。私は最終結果がこのようなものになると仮定します：$('.opt1, .opt2, .opt3').removeClass('hidden');

私はどこにいるのかそのポイントに到達する方法は分かりません。

Answer 1

あなたは次にあなたが次に

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

をやっている方法を分割

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

接頭辞としてピリオド（。）を追加することができ

あなたの道維持するつもりならjoin()関数を使用して、split colors配列を単一の文字列に変換する関数

splitColorString = splitColors.join(); 

これはその後、jqueryの削除クラスの事

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