Javascript 如何在使用选择器隐藏其他DOM选项的同时显示1 DOM对象

我是js新手，我正在尝试根据用户的选择显示定价/计划。我不认为这是最好的方法，但因为我是一个初学者，我不太确定一个更有效的方法。目前脚本似乎隐藏了我的选择器，我不知道为什么。关于如何制定更好的解决方案的任何建议。任何帮助都将不胜感激

<script type="text/javascript">
        $(document).ready(function(){
            $("#plan-prices").change(function(){
                $( "#plan-prices option:selected").each(function(){
                                        if($(this).attr("value")=="starter-price"){
                                           $(".starter-plan").show();
                                           $(".small-plan").hide();
                                           $(".medium-plan").hide();
                                           $(".large-plan").hide();
                                           $(".enterprise-plan").hide();
                                          }
                                          if($(this).attr("value")=="small-price"){
                                           $(".starter-plan").hide();
                                           $(".small-plan").show();
                                           $(".medium-plan").hide();
                                           $(".large-plan").hide();
                                           $(".enterprise-plan").hide();
                                         }
                                         if($(this).attr("value")=="medium-price"){
                                           $(".starter-plan").hide();
                                           $(".small-plan").hide();
                                           $(".medium-plan").show();
                                           $(".large-plan").hide();
                                           $(".enterprise-plan").hide();
                                         }
                                          if($(this).attr("value")=="large-price"){
                                           $(".starter-plan").hide();
                                           $(".small-plan").hide();
                                           $(".medium-plan").hide();
                                           $(".large-plan").show();
                                           $(".enterprise-plan").hide();
                                         }
                                         if($(this).attr("value")=="enterprise-price"){
                                           $(".starter-plan").hide();
                                           $(".small-plan").hide();
                                           $(".medium-plan").hide();
                                           $(".large-plan").hide();
                                           $(".enterprise-plan").show();
                    }
                });
        }).change();
     });
</script>

我的HTML

19.99美元/月

看起来很简单

尝试：

---

你可以像这样把它缩短很多。其思想是将所有内容隐藏一次，然后对于选定的一次，通过算法将price类名转换为plan类名，然后显示一个：

<script type="text/javascript">
$(document).ready(function () {
    $("#plan-prices").change(function () {
        $(".starter-plan, .small-plan, .medium-plan, .large-plan, .enterprise-plan").hide();
        $("#plan-prices option:selected").each(function () {
            var val = $(this).attr("value").replace("-price", "-plan");
            $("." + val).show();
        });
    }).change();
});
</script>

---

假设您使用的是multiselect，而不是.each语句所指示的下拉列表，则可以使用以下方法。使用toggle和inArray

 $(function(){
     var priceSelected = function(){             
         var selectedValues = [];
         $('#plan-prices option:selected').each(function(){
             selectedValues.push($(this).val());
         });
         $(".starter-plan").toggle($.inArray("starter_price", selectedValues));
         $(".small-plan").toggle($.inArray("small_price", selectedValues));
         $(".medium-plan").toggle($.inArray("medium_price", selectedValues));
         $(".large-plan").toggle($.inArray("large_price", selectedValues));
         $(".enterprise-plan").toggle($.inArray("enterprise_price", selectedValues));
     };
     $("#plan-prices").on('change', priceSelected);
     priceSelected();
 });

---

您可能希望将缩进向左移动一点。不要使用制表符缩进，使用空格，通常每个缩进2个就足够了，如果你真的喜欢空格的话，可以使用4个。而且，你的HTML是不完整的。许多未关闭的标签。你应该寻找一个合适的IDE。通过在你的if挑战前隐藏所有东西来简化一半，然后立即取消隐藏你需要的东西。这样，你就不必每次都列出所有隐藏的小东西。你也可以用一个switch语句替换所有的IFs。甚至不存在计划价格。

<script type="text/javascript">
$(document).ready(function () {
    $("#plan-prices").change(function () {
        $(".starter-plan, .small-plan, .medium-plan, .large-plan, .enterprise-plan").hide();
        $("#plan-prices option:selected").each(function () {
            var val = $(this).attr("value").replace("-price", "-plan");
            $("." + val).show();
        });
    }).change();
});
</script>

 $(function(){
     var priceSelected = function(){             
         var selectedValues = [];
         $('#plan-prices option:selected').each(function(){
             selectedValues.push($(this).val());
         });
         $(".starter-plan").toggle($.inArray("starter_price", selectedValues));
         $(".small-plan").toggle($.inArray("small_price", selectedValues));
         $(".medium-plan").toggle($.inArray("medium_price", selectedValues));
         $(".large-plan").toggle($.inArray("large_price", selectedValues));
         $(".enterprise-plan").toggle($.inArray("enterprise_price", selectedValues));
     };
     $("#plan-prices").on('change', priceSelected);
     priceSelected();
 });