附加事件处理函数并在就绪时执行它的更简洁的方法答案

【问题标题】：Cleaner way to attach event handler function and execute it on ready附加事件处理函数并在就绪时执行它的更简洁的方法
【发布时间】：2015-04-09 09:10:31
【问题描述】：

当我有一个带有修改布局的按钮的页面（比如说显示/隐藏一个框的复选框）时，我最终会编写以下代码块：

$(function(){
    var advancedOptionsToggle = function() {
        var isChecked = $('#advanced-options-checkbox').checked;
        $('#advanced-options').toggle(isChecked);
    };
    advancedOptionsToggle();
    $('#advanced-options-checkbox').change(advancedOptionsToggle);
});

原因是我的页面内容是在服务器端动态生成的，而不是在客户端由JS渲染，所以可能已经勾选了复选框。

它看起来像是一个常见问题，所以我相信一定有一种模式可以更干净地解决它。有没有可以封装的jQuery函数？

【问题讨论】：

.show(isChecked ) 应该是什么意思？我没有看到任何接受第一个布尔参数的“重载”。
我认为这很简单。您已经通过定义命名函数消除了重复。
对我来说这看起来很不错，因为您有两种方法来触发您的功能，加载和更改。我认为您不会找到更清洁的方法。
.show(isChecked) 应该是.toggle(isChecked)。
如果您打算多次使用，可以使用自定义 jQuery 插件包装代码

标签： javascript jquery

【解决方案1】：

您的解决方案当然是可用的，但是您的问题表明您可能拥有其中的几个。我是否可以建议为这种用法创建一个通用模式，而不是求助于 ID？

$(function(){
    var toggleOptionCheck = function(el){
        var isChecked = $(el).is(':checked');
        $($(el).data('related')).toggle(isChecked);
    }
    $('.options-toggle').each(function(idx, el){
        toggleOptionCheck(el);
    });
    // Separate call for illustration/simplicity.
    $('.options-toggle').on('change', function(){toggleOptionCheck(this)});
});

<input type="checkbox" checked name="show_advanced" 
    class="options-toggle" data-related="#advanced-options" />
<div id="advanced-options" class="hidden-at-start"></div>

【讨论】：

【解决方案2】：

你可以像这样创建一个简单的 jQuery 插件来稍微清理一下代码：

$.fn.advancedOptionsToggle = function(selector) {
    return this.each(function() {
        var isChecked = $(this).checked;

        $(this).unbind('change').change(function(){
            $(selector).toggle(isChecked));    
        });
    });
};

$(function(){
    $('#advanced-options-checkbox').advancedOptionsToggle('#advanced-options');
});

【讨论】：