選択値に基づいて複数のdivにアクティブなクラスを追加します

Question

私はすでに基本機能を設定していますが、少し修正する必要があります。私の現在のコードは、選択ドロップダウンの値に基づいて1つのdivに「アクティブ」クラスを追加します。私がしなければならないのは、select内の複数の値に基づいて複数のdivにアクティブなクラスを追加することです。

選択値が '.recs'の場合​​、クラス 'recs'を持つdivは、選択の変更時にクラス 'active'を受け取ります。私がする必要があるのは：選択値に ".recs .green .rep"などの複数の値がある場合、class recs、green、またはrepを持つすべてのdivに 'active'クラスを追加します。

私の現在のコードは次のとおりです。

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

マークアップ：

<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> 

ありがとうございます！あなたが選択した値

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

第二のクラスを持つ配列を作成

Answer 1

まず、あなたは、カンマで区切られた文字列内のすべてのクラスを取得するには、カンマで区切られた文字列にそれらを結合します。

selected = selected.join(','); 

第三に、あなたは、スプリット機能を使ってこれを行うことができるはず

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

Answer 2

クラスを追加するためにjqueryのセレクタとして文字列を使用します。これにより、配列が選択された変数に返され、選択された配列内に存在する値が何であれ、$ .each関数を使用して反復処理を行うことができます。

それは次のようになります。

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

はまた、div要素の代わりにアンカーを標的にされたクラスをリセットするための責任のコードのセクションに気づきました。私はこれを変更してjsfiddleが正しく動作するようにしましたが、あなたのdivを今後アンカーに切り替える予定があるかどうかはわかりません。 https://jsfiddle.net/2a6o06wh/：いずれの場合で

は、ここで更新フィドル

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