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()缩小ifor或子句(IE没有.indexOf()......)
• 使用.toggle(bool)而不是重复.show()/ .hide()代码
• 额外的if是计算两个处理程序的差异