jQuery:缩短代码

Question

这段代码可以以某种方式缩短吗？我尝试了多种方法来压缩它，但我无法让它工作:

    //Customer info
$('input#state-field-a, input#state-field-b').hide();
$('select#country-a').change(function(){      
  if ($(this).val() === "United States" || $(this).val() === "Canada" ||$(this).val() === "null")
  {
    $('select#state-a').show();
    $('input#state-field-a, input#state-field-b').hide();
     } else {
    $('select#state-a').hide();
    $('input#state-field-a').show();
  } 
});
//Shipping nfo
$('select#country-b').change(function(){      
  if ($(this).val() === "United States" || $(this).val() === "Canada" ||$(this).val() === "null")
  {
    $('select#state-b').show();
    $('input#state-field-b').hide();
     } else {
    $('select#state-b').hide();
    $('input#state-field-b').show();
  } 
});

提前致谢。

更新:我忘记提供一些背景信息。

我在同一页面中有两个区域，一个用于帐单/客户信息，另一个用于运输信息，当用户从选择菜单中选择一个选项时，其他选项会在同一部分中显示/隐藏。这两个函数应该彼此“独立”工作，因为它们属于不同的部分。

例如，如果我从“客户信息”选择菜单中选择“加拿大”，则无法更改/更改“送货信息”部分中的任何内容。

不确定这是否有意义。

再次感谢您对此提供的任何帮助。

Answer 1

您可以使用一些快捷函数将所有代码缩小到以下范围:

$('#state-field-a, #state-field-b').hide();
$('#country-a, #country-b').change(function(){
  var m = $.inArray($(this).val(), ["United States","Canada","null"]) != -1;

  $('#' + this.id.replace('country', 'state') + '-a').toggle(m);
  if(this.id === 'country-a') $('#state-field-b').toggle(m);

  $('#' + this.id.replace('country', 'state-field') + '-a').toggle(!m);
});

我们在这里做了一些不同的事情:

• 不在 ID 上使用标签选择器
• 使用 .change()一次，因为它们具有相同的效果
• 使用 $.inArray()缩小 if 或子句的范围(IE 没有 .indexOf()...)
• 使用.toggle(bool)而不是重复.show()/.hide()代码
• 额外的 if 是为了解释两个处理程序的差异