这段代码可以以某种方式缩短吗?我尝试了多种方法来压缩它,但我无法让它工作:
//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();
}
});
提前致谢。
更新:我忘记提供一些背景信息。
我在同一页面中有两个区域,一个用于帐单/客户信息,另一个用于运输信息,当用户从选择菜单中选择一个选项时,其他选项会在同一部分中显示/隐藏。这两个函数应该彼此“独立”工作,因为它们属于不同的部分。
例如,如果我从“客户信息”选择菜单中选择“加拿大”,则无法更改/更改“送货信息”部分中的任何内容。
不确定这是否有意义。
再次感谢您对此提供的任何帮助。
最佳答案
您可以使用一些快捷函数将所有代码缩小到以下范围:
$('#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
是为了解释两个处理程序的差异
关于jQuery:缩短代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3250644/