javascript - 根据选择字段值加载页面时隐藏 DIV

Question

我有以下脚本，它根据选择 ID 值更改时的内容隐藏/显示 2 个 div。这工作得很好。

<script type="text/javascript">
        $(function () {
            $("#ue_package").change(function () {
                if ($(this).val() == "Featured") {
                    $(".image_container").hide();
                    $(".image_container_featured").show();              
                } else if ($(this).val() == "Standard") { 
                    $(".image_container").show();
                    $(".image_container_featured").hide();              
                }
            });
        });
    </script>   

我想做的是执行相同的操作，不仅在更改时，而且在页面加载时也是如此。因此，当我进入页面时，如果 FEATURED 为值，则正确的 DIV 将已被隐藏和显示。

我尝试了以下方法，但没有成功。

  <script type="text/javascript">
$( document ).ready(function() {
                $("#ue_package").change(function () {
                    if ($(this).val() == "Featured") {
                        $(".image_container").hide();
                        $(".image_container_featured").show();              
                    } else if ($(this).val() == "Standard") { 
                        $(".image_container").show();
                        $(".image_container_featured").hide();              
                    }
                });
            });
        </script>   

Answer 1

将工具定义为函数。注意将 $(this) 替换为元素 id 选择器，并在 onchange 和 body onload 中调用该函数，如下所示:

$( document ).ready(function() {
   showHide();
   $("#ue_package").change(function () {
        showHide();
   });
});


function showHide() {
    if ($('#ue_package').val() == "Featured") {
        $(".image_container").hide();
        $(".image_container_featured").show();              
    } else if ($('#ue_package').val() == "Standard") { 
        $(".image_container").show();
        $(".image_container_featured").hide();              
    }
}