Question

通常我用jQuery绑定一个事件，然后立即调用它，比如当我设置一些元素的定位或可见性等等时。

$('#myElement').on('click', function () {
    $('#myOtherElement').css('color', 'red');
}).click();

这样可行，但模式有点难看，特别是如果我的第一个选择器找到多个元素。然后多次触发事件，第一个选择器找到的每个元素一次。我最终这样做了：

$('.lots-of-elements').on('click', function () {
    $('#myOtherElement').css('color', 'red');
}).first().click();

同样，这有效，但这不是我的最爱。有没有更好的模式可供使用？

我知道我可以这样做：

function onClick() {
    $('#myOtherElement').css('color', 'red');
};

$('.lots-of-elements').on('click', onClick);
onClick();

但那更加冗长。

Answer 1

我不明白为什么要使用点击事件然后立即点击它。你不能把css编辑放在主范围内吗？

关于你的问题，你也可以创建一个像这样的jQuery函数：

$.fn.extend({
    clickColor: function(element, color) {
        $(this).on('click', function() {
            $(element).css('color', color);
        });
        return $(this);
    }
});

将其放在一个单独的文件中，并仅使用以下内容清理主文件：

$('#clicker').clickColor('#other', 'red').click();
$('.clicker').clickColor('.another', '#00FF00').first().click();

查看DEMO。

当然，你可以将.first()和.click()放在函数中，如果这是你喜欢的那样。

然后看一下这个DEMO 2

以jQuery模式绑定并触发事件

1 个答案: