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

On my page I have a drop-down select box, with a default value of (empty). When the user selects an entry, the appropriate form for that entry type is displayed.

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

Couple of problems..

几个问题..

The code is not DRY and seems more verbose than it needs to be, so not easily maintainable / extensible.

代码不是DRY,看起来比它需要的更冗长,因此不易维护/可扩展。

When a user selects something, fills in the form, goes to the next page, and then hits the Back button, the select field is pre-selected with their choice, but since there has been no .change() event, the form box is not displayed. They have to select a different <option>, then click back to their original choice to get their forum back.

当用户选择某些内容,填写表单,转到下一页,然后点击“返回”按钮时,会根据自己的选择预先选择选择字段,但由于没有.change()事件,表单框没有显示。他们必须选择不同的

Here's the code:

这是代码:

<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>

Help JS gurus of SO!

帮助JS的大师!

4 个解决方案

#1

Instead of the multiple IF clauses, you can iterate over an array of values. But in this case, if there are no other requirements then simply:

您可以迭代一组值,而不是多个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();
     });
});

Should be enough.

应该够了。

#2

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

#3

You could change all those if statements to some or(||) expressions.

您可以将所有if语句更改为某些或(||)表达式。

On ready(), you could check if the fields have the default value. If not, then you could manually trigger change().

在ready()上,您可以检查字段是否具有默认值。如果没有,那么你可以手动触发change()。

#4

I probably wouldn't use a select box, as select boxes are only a good choice when the options are known to the user before they pull it down. No mystery meat allowed. Here is a good article on selection dependant inputs.

我可能不会使用选择框,因为在用户知道选项之前,选择框只是一个很好的选择。不允许神秘的肉。这是一篇关于选择依赖输入的好文章。

My take on this problem: * Only the section linked to the selected option should be shown, so I don't want to use toggle.

我对此问题的看法:*只显示链接到所选选项的部分,因此我不想使用切换。

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

#1