1

ドロップダウンリストの切り替え時に非表示にするときに表示するカラーブロックを制御するために、以下にこのコードがあります。

ただし、ドロップダウン リストを変更した場合 (つまり、色を選択した場合) にのみ機能します。しかし、ロード時に正しいカラーブロックも表示する必要があります。

現在、オンロードの「値」に関係なく、デフォルトで #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;}
4

1 に答える 1

4

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 フィドルのデモ。

ただし、上記は次のように縮小および簡略化できます。

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

JS フィドルのデモ。

参考文献:

于 2013-10-04T10:24:25.810 に答える