控制css的選項值

Question

我在這裏下面有這段代碼，用來控制在下拉列表上切換顯示在哪個顏色塊上。

但是，它只適用於當我在下拉列表（即選擇一種顏色）進行更改。 但我需要它也加載正確的顏色塊。

現在，無論onload值如何，其默認顯示#red_ok。

如何編輯此代碼以實現此目的？

$(function() { 
    $("#product-select-option-1").change(function() { 
    var val = $(this).val(); 

    if(val === "Red") { 
     $("#red_ok").css({"display":"block"}); 
     $("#yellow_ok").css({"display":"none"}); 

    } 
    else if(val === "Yellow") { 
     $("#yellow_ok").css({"display":"block"}); 
     $("#red_ok").css({"display":"none"}); 

    } }); }); 

。

#red_ok {width:25px; height:25px; background:#c40314;} 
#yellow_ok {display:none; width:25px; height:25px; background:#f5d116;} 

Answer 1

只需觸發手動change事件：

$(function() { 
    // binds the change event-handler: 
    $("#product-select-option-1").change(function() { 
     var val = $(this).val(); 

     if (val === "Red") { 
      $("#red_ok").css({ 
       "display": "block" 
      }); 
      $("#yellow_ok").css({ 
       "display": "none" 
      }); 

     } else if (val === "Yellow") { 
      $("#yellow_ok").css({ 
       "display": "block" 
      }); 
      $("#red_ok").css({ 
       "display": "none" 
      }); 

     } 
    // triggers the change event: 
    }).change(); 
}); 

JS Fiddle demo。

上面可以，但是，可以減小和簡化，以便：

$(function() { 
    $("#product-select-option-1").change(function() { 
     $('div[id$="ok"]').hide(); 
     $('#' + this.value.toLowerCase() + '_ok').show(); 
    }).change(); 
}); 

JS Fiddle demo。

參考文獻：

• Attribute-ends-with ([attribute$="value"]) selector。
• change()。