Javascript 如何减少重复的jquery代码
使用局部变量作为所有正在处理的对象的“基础”结果。然后,您可以创建一个函数来处理重复输入的步骤Javascript 如何减少重复的jquery代码,javascript,jquery,function,Javascript,Jquery,Function,使用局部变量作为所有正在处理的对象的“基础”结果。然后,您可以创建一个函数来处理重复输入的步骤 jQuery('#edit-field-number-of-beneficial-owner-und').change(function() { if (jQuery(this).val() == 0) { jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field
jQuery('#edit-field-number-of-beneficial-owner-und').change(function() {
if (jQuery(this).val() == 0) {
jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-one').nextUntil('.form-actions').find('input, select, textarea').val('');
jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-one').nextUntil('.form-actions').find('input:checkbox').attr('checked', false);
jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-one').nextUntil('.form-actions').find('select').trigger("chosen:updated");
} else if (jQuery(this).val() == 1) {
jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-two').nextUntil('.form-actions').find('input, select, textarea').val('');
jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-two').nextUntil('.form-actions').find('input:checkbox').attr('checked', false);
jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-two').nextUntil('.form-actions').find('select').trigger("chosen:updated");
} else if (jQuery(this).val() == 2) {
jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-three').nextUntil('.form-actions').find('input, select, textarea').val('');
jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-three').nextUntil('.form-actions').find('input:checkbox').attr('checked', false);
jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-three').nextUntil('.form-actions').find('select').trigger("chosen:updated");
}
});
正如前面指出的,简化代码的主要方法是将中间步骤存储在变量中。我想在数据结构中添加封装条件检查:
jQuery('#edit-field-number-of-beneficial-owner-und').change(function() {
let numOwner = jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner');
let handle = function(sibs) {
sibs.nextUntil('.form-actions').find('input, select, textarea').val('');
sibs.nextUntil('.form-actions').find('input:checkbox').attr('checked', false);
sibs.nextUntil('.form-actions').find('select').trigger("chosen:updated");
}
if (jQuery(this).val() == 0) {
handle(numOwner.siblings('#edit-field-beneficial-owner-one'))
} else if (jQuery(this).val() == 1) {
handle(numOwner.siblings('#edit-field-beneficial-owner-two'))
} else if (jQuery(this).val() == 2) {
handle(numOwner.siblings('#edit-field-beneficial-owner-three'))
}
});
有很多方法可以解决这个问题。这里有一个例子
将值0-2映射到等效字符串中。使用该值作为数组的索引以获取字符串(请注意允许使用的回标记)。将一长串jQuery调用存储到一个变量中,并将该变量用于
find()
调用
jQuery('#edit-field-number-of-beneficial-owner-und').change(function() {
const $this = jQuery(this);
const labels = ['one', 'two', 'three'];
const target = $this.parent()
.parent('#edit-field-number-of-beneficial-owner')
.siblings(`#edit-field-beneficial-owner-${labels[+$this.val()]}`)
.nextUntil('.form-actions');
target
.find('input, select, textarea')
.val('');
target
.find('input:checkbox')
.attr('checked', false);
target
.find('select')
.trigger('chosen:updated');
});
我会错过这个节目吗?荣誉删除了我自己的答案。你的代码正在运行。非常感谢你。但我必须检查20个人。“将一长串的jQuery调用存储到一个变量中,并将该变量用于find()调用。”正在运行。但整个代码都不起作用。我不知道哪一部分错了。但似乎一切都是正确的。
jQuery('#edit-field-number-of-beneficial-owner-und').change(function() {
let ownerMap = ['one', 'two', 'three']
let owner = jQuery(this).val()
let formAction = jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings(`#edit-field-beneficial-owner-${ownerMap[owner]}`).nextUntil('.form-actions')
formAction.find('input, select, textarea').val('');
formAction.find('input:checkbox').attr('checked', false)
formAction.find('select').trigger("chosen:updated")
});