Question

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

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

原因是我的页面内容是在服务器端动态生成的，而不是由客户端的JS呈现，因此可能已经检查了复选框。

它看起来像一个常见问题，所以我认为必须有一种模式可以解决它更清洁。是否有可以封装它的jQuery函数？

Answer 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>

Answer 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');
});

更清晰的方式来附加事件处理函数并在准备好时执行它

2 个答案: