javascript - 摆脱 jQuery 中的重复代码

Question

美化以下代码最优雅的方法是什么？我想摆脱重复的代码：

$('#popup_settings_enable_name').click(function() {
    $el = $('#popup_settings_name_field');
    if ($(this).prop('checked')) {
        $el.removeAttr("disabled");
    } else {
        $el.attr("disabled", "disabled");
    }
}).each(function() {
    $el = $('#popup_settings_name_field');
    if ($(this).prop('checked')) {
        $el.removeAttr("disabled");
    } else {
        $el.attr("disabled", "disabled");
    }
});

Answer 1

click您可以在安装后简单地触发事件处理程序.triggerHandler：

$('#popup_settings_enable_name')
.click(function() {
    // ...
})
.triggerHandler('click');

请注意，.trigger在许多情况下，它也会做同样的事情，但您应该注意它们之间.trigger的细微差别。.triggerHandler手册页清楚地提到了它们。

Answer 2

您可以简单地触发事件来执行初始化处理程序：

$('#popup_settings_enable_name').click(function() {
    …
}).click();

另一种方法是只使用函数声明：

function update() {
    // a little simplification:
    $('#popup_settings_name_field').prop("disabled", !this.checked);
}
$('#popup_settings_enable_name').click(update).each(update);

Answer 3

手动触发点击事件可能会产生意想不到的副作用（如果有其他委托也被分配了点击事件怎么办？）

我建议将重复的代码重构为自己的方法，然后将该方法简单地传递给 jQuery.click()函数，然后将其传递给 jQuery.each()函数。