如何让这个 jQuery 函数更优雅？

Posted 2023-05-09

【中文标题】如何让这个 jQuery 函数更优雅？

【英文标题】：How to make this jQuery function more elegant?

【发布时间】：2010-09-29 07:45:55

【问题描述】：

在我的页面上，我有一个下拉选择框，默认值为（空）。当用户选择一个条目时，会显示该条目类型的相应表单。

几个问题..

代码不是 DRY，看起来比它需要的更冗长，因此不容易维护/扩展。 当用户选择某项内容、填写表单、转到下一页，然后单击“返回”按钮时，选择字段已预先选择了他们的选择，但由于没有.change() 事件，不显示表单框。他们必须选择不同的<option>，然后单击返回原来的选择以恢复他们的论坛。

代码如下：

<script type="text/javascript">
    $(document).ready(function()

        $('#select_type').change(function () 
            $('fieldset').css('display','none'); # hide all the forms on the page
            var selectval = $('#select_type').val();
            if (selectval == 'instance')
            
                $('#instance').toggle();
            
            if (selectval == 'mob')
            
                $('#mob').toggle();
            
            if (selectval == 'dailyquest')
            
                $('#dailyquest').toggle();
            
            if (selectval == 'repeatablequest')
            
                $('#repeatablequest').toggle();
            
            if (selectval == 'zonequest')
            
                $('#zonequest').toggle();
            
            if (selectval == 'reward')
            
                $('#reward').toggle();
            
        );

    );
</script>

帮助 SO 的 JS 大师！

【参考方案1】：

您可以迭代一个值数组，而不是多个 IF 子句。但是在这种情况下，如果没有其他要求，那么只需：

$(document).ready(function()
     var select = $('#select_type');
     $('#' + select.val()).toggle(); // Toggle the preset value
     select.change(function () 
         $('fieldset').css('display','none');
         $('#' + $(this).val()).toggle();
     );
);

应该够了。

【讨论】：

是的，这正是我在寻找问题 #1 的内容。关于问题 #2 的任何想法？

错过了。将其添加到答案中

谢谢。希望你能在那里找到有用的东西:)

【参考方案2】：

$(document).ready(function() 
  $("#select_type").change(function () 
    $("fieldset").css("display", "none");
    $("#" + $(this).val()).toggle();
  ).change();
);

【参考方案3】：

您可以将所有这些 if 语句更改为一些 or(||) 表达式。 在 ready() 上，您可以检查字段是否具有默认值。如果没有，那么您可以手动触发 change()。

【参考方案4】：

我可能不会使用选择框，因为只有当用户在下拉选项之前就知道选项时，选择框才是一个不错的选择。不允许使用神秘肉。这是一篇关于selection dependant inputs 的好文章。

我对这个问题的看法： * 应该只显示链接到所选选项的部分，所以我不想使用切换。

$(function()
  var sel = $("#select_type");
  $("#"+sel.val()).show();
  sel.change(function()
    $(this).children("option").each(function()
      $("#"+this.value)[this.selected ? "show" : "hide"]();
    );
  );
);