値が選択されなくなったときに逆の変更（指定されたID）

Question

私のウェブサイトにある12のDIVのうち1つのテキストの色を変更する機能があります。

$('.position_select').change(function(){ 
    var selected = $(this).val(); 
    var shelf = $("#mockup_shelf_" + selected) 
    $(shelf).css({ color: "#FF6633" }); 
}).change(); 

ボタンを表示する位置をユーザーが表示するのはモックアップです。これは、selectタグで選択されている数字（1から12まで）のそれに基づいています：

f.select :position, (1..12), {prompt: 'Select Position'}, {required: 'true', class: "position_select" } 

私は戻って、黒（または選択されていないすべてのdiv要素）にこのDIVのテキストを変更したいユーザーは、この特定の位置を選択解除場合別のものを選ぶ。どうしたらいいですか？ 色はページのリロード時に戻ってくるはずですが、それはポイントではありません。

Answer 1

最も簡単な方法は、単にデフォルトの色にすべての要素を更新し、このように選択した項目に対応する要素の色を変更することです：

$('.position_select').change(function(){ 
    //reset all elements color 
    $("[id^=mockup_shelf_]").css({ color: "#000000" }); 

    //now find and set the color of the selected item 
    var selected = $(this).val(); 
    var shelf = $("#mockup_shelf_" + selected) 
    $(shelf).css({ color: "#FF6633" }); 
}).change(); 

私は以来starts with属性セレクタを使用していますすべてのIDの先頭は同じです。

http://www.w3schools.com/cssref/sel_attr_begin.asp

[属性^ =値]セレクタは、その属性 値が指定された値で始まるすべての要素に一致します。

---

代わりに、あなたはすべてのmockup_shelfの要素に同じクラスを割り当て、それらすべてをターゲットに、このクラスセレクタを使用することができます。$(".mockup_shelf").css({ color: "#000000" });

---

そして良いものはスリーで来ているので、あなたは可能性また、スクリプトからスタイリング情報を完全に削除し、スタイルシートに2つのCSSクラスを作成します（より複雑なスタイルを簡単に行うことができます）。たとえば、次のように

.mockup_shelf { 
    color: #000000; 
} 
.mockup_shelf.selected { 
    color: #FF6633; 
} 

あなたmockup_shelf要素のすべてmockup_shelfクラスを持つことになり、その後、スクリプトであなたがそうのようなselectedクラスを追加または削除できます

$('.position_select').change(function(){ 
    //reset selected element's color 
    $(".mockup_shelf.selected").removeClass("selected"); 

    //now find and set the color of the selected item 
    var selected = $(this).val(); 
    var shelf = $("#mockup_shelf_" + selected) 
    $(shelf).addClass("selected"); 
}).change(); 

EDIT あなたは明らかにしているので複数の選択肢でこれを達成する方法を示すサンプルフィドルを作成しました。

$('.position_select').change(function() { 
    //remove class from all shelves to reset them 
    $(".mockup_shelf.selected").removeClass("selected"); 

    var $position_select = $(this); //explicitly labeling this to avoid confusion in the next part 
    $position_select.find("option:selected").each(function() { 
     var $option = $(this); //'this' now has a new context, so label it to avoid confusing it with 'this' in the outer context 
     var shelf = $("#mockup_shelf_" + $option.val()); 
     shelf.addClass("selected"); 
    }); 
    }).change(); 

基本的に、あなたのselectの変更イベントが発生するたび、あなたは（jQueryのビルトイン:selectedセレクタを使用して）すべてのselectedオプションを介してすべてのmockup_shelf要素と、ループ上のスタイルをリセットし、その後selectedを追加しますクラスを関連付けられたシェルフに割り当てます。