以jQuery模式绑定并触发事件

时间:2016-01-07 18:35:35

标签: design-patterns javascript jquery

通常我用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();

但那更加冗长。

1 个答案:

答案 0 :(得分:0)

我不明白为什么要使用点击事件然后立即点击它。你不能把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