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

提前致谢。

更新：我忘记给出一些背景信息。

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

例如，如果我从“客户信息”选择菜单中选择 Canada ，则无法更改/更改“运输信息”部分中的任何内容。

不确定这是否有意义。

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

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是为了解决两个处理程序的差异

Answer 2

您选择ID的任何地方，都以ID开头。 id选择器之前的所有内容都无关紧要。

例如：

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

减少所有代码重复。这可以成为一个函数：

    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语句：

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

Answer 3

首先，在你的html中，将select id更改为类似的类：

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

然后你可以通过这种方式缩短它（使用来自Nick的答案的.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

这不是缩短您的代码，实际上它可能比您的代码稍长但更长时间：）

你可以没有太多的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>

通过将每个内容分组到父级下并且仅使用 - #billing，#shipping的ID，下面的所有内容都可以遵循完全相同的结构。以下是更改国家/地区时的回调处理程序（感谢@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);

Answer 5

请参阅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();
        }
    })
});

jQuery：缩短代码

5 个答案: