指定の[ Class ]から選択されたvalue値を、紐付けられた要素に[ Class ]としてして与えるプログラムを組んでいます。
下記は現在書いたもので意図する動きをしているのですが、これを拡張しようとした際につまずいてしまいました。
html
HTML
1<select class=“Cauce”> 2 <option value=“Sample1”>Sample1</option> 3 <option value=“Sample2”>Sample2</option> 4</select> 5 6<div class=“Effect”> … </div>
jQuery
javascript
1$(‘[class*=Cauce]').change(function() { 2 $(this).children('option').each(function() { 3 var CurrentValue = jQuery(this).val(); 4 $('[class*=Effect]').removeClass(CurrentValue); 5 }); 6 7 var SelectValue = jQuery(this).children('option:selected').text(); 8 $('[class*=Effect]’).addClass(SelectValue); 9});
上記を、下記のようなhtmlにてClass名[ Cause1 ]で選択された値をClass名[ Effect1 ]へ、Class名[ Cause2 ]で選択された値はClass名[ Effect2 ]へ…という形に変更したいと考えています。
html
html
1<select class=“Cauce1”> 2 <option value=“Sample1”>Sample1</option> 3 <option value=“Sample2”>Sample2</option> 4</select> 5<select class=“Cauce1”> 6 <option value=“Sample1”>Sample1</option> 7 <option value=“Sample2”>Sample2</option> 8</select> 9<select class=“Cauce2”> 10 <option value=“Sample1”>Sample1</option> 11 <option value=“Sample2”>Sample2</option> 12</select> 13<select class=“Cauce3”> 14 <option value=“Sample1”>Sample1</option> 15 <option value=“Sample2”>Sample2</option> 16</select> 17<select class=“Cauce3”> 18 <option value=“Sample1”>Sample1</option> 19 <option value=“Sample2”>Sample2</option> 20</select> 21<select class=“Cauce3”> 22 <option value=“Sample1”>Sample1</option> 23 <option value=“Sample2”>Sample2</option> 24</select> 25 26<div class=“Effect1”> … </div> 27<div class=“Effect2”> … </div> 28<div class=“Effect3”> … </div>
これをJQuery及びJavascriptで解決する方法をご教授いただければと思います。
宜しくお願い申し上げます。
*[ Cauce ][ Effect ]という共通の文字列でそれぞれを紐付け、その後ろに任意に割り当てた数字が一致するもの同士で動作させたいと考えています。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。