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

您可以使用一些快捷功能，以缩小所有代码到这一点：：

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, select#state-b').show(); 
    } 

这个更加模块化的语句来替换你的if语句

$('#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是解释这个差异在两个处理

Answer 2

任何你选择一个id，id为开始。在id选择器之前的所有内容都是不相关的。

例：

$('#state-field-a, #state-field-b').hide(); 

减少所有代码重复。这可以被制作成一个功能：

var acceptedCountries = ["United States", "Canada", "null"]; 
if($.inArray($(this).val(), acceptedCountries) > 0) 

Answer 3

首先，在你的HTML，更改选择ID的上课像这样：

<select id="a" class="country">...</select> 
<select id="b" class="country">...</select> 

然后你就可以缩短这种方式（使用.toggle(bool)编辑从尼克的回答是）：

var inputs = $('#state-field-a, #state-field-b'), 
    selects = $('select.country'), 
    countries = {'United States', 'Canada'}; 

inputs.hide(); 

selects.change(function() { 
    var value = $(this).val(), 
     toggle = ($.inArray(value, countries) != -1 || value === "null"); 

    $(this).toggle(toggle); 
    inputs.toggle(toggle); 
}); 

Answer 4

见http://jsfiddle.net/nK2T3/

你需要使用一个选择上下文变量来选择的范围限制在相应的部分。为了讨论的方便，我以为你的输入被分成字段集：

var countrySelects = '#country-a, #country-b', 
    stateSelects = '#state-a, #state-b', 
    stateInputs = '#state-field-a, #state-field-b';  

$(stateInputs).hide(); 

$('fieldset').each(function() { 
    var $fieldset = $(this); 

    $(countrySelects, $fieldset).change(function() { 
     var $countrySelect = $(this), 
      $stateSelect = $(stateSelects, $fieldset), 
      $stateInput = $(stateInputs, $fieldset); 

     if ($countrySelect.val() === "United States" || $countrySelect.val() === "Canada" || $countrySelect.val() === "null") { 
      $stateSelect.show(); 
      $stateInput.hide(); 
     } else { 
      $stateSelect.hide(); 
      $stateInput.show(); 
     } 
    }) 
});​ 

Answer 5

这不是你的代码的缩短，而事实上它也许有点，但不是你的代码:)

您不再可以不用太多的id并通过使其具有通用性来引用特定的元素。据我所知，结算和发货部分的工作方式完全相同，可能只有一两个差异。如果是这样，你可以有相同的结构既如：

<div id='billing' class='address'> 
    <select class='country'> .. </select> 
    <select class='state'> .. </select> 
    <input type='text' class='state-field'> 
</div> 

<div id='shipping' class='address'> 
    <select class='country'> .. </select> 
    <select class='state'> .. </select> 
    <input type='text' class='state-field'> 
</div> 

由父母下将每一个也是唯一使用的ID - #billing，#shipping，一切底下可以按照完全相同的结构。这里是一个国家改变时的回调处理程序（感谢@Nick Craver的切换技巧）：

function countryChanged() { 
    var countries = $(this); 
    var selectedCountry = countries.val(); 
    var container = $(this).closest('.address'); 

    var shouldShowStates = function(country) { 
     return ['United States', 'Canada', 'null'].indexOf(country) != -1; 
    } 

    var toggleFields = function(showList) { 
     $('.state', container).toggle(showList); 
     $('.state-field', container).toggle(!showList); 
    } 

    var showStates = shouldShowStates(selectedCountry); 
    toggleFields(showStates); 
} 


$('.country').change(countryChanged);