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