jquery - 控制CSS的选项值

Question

我在下面有这段代码，用于控制在下拉列表上切换时隐藏时显示哪个颜色 block 。

但是，它仅在我对下拉列表进行更改(即选择颜色)时才有效。 但我也需要它在加载时显示正确的颜色 block 。

现在，无论加载的“值”如何，它都会默认显示#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() .