jQuery - 创建一个jQuery函数

Question

对于总标题我很抱歉,但我真的不知道怎么称呼它.

这是我的代码,我想减少:

    $('.ShowDialogIcon').click(function() {
        $('.show_dialog').slideDown('fast');
        return false;
    });

    $('.ShowDialogIcon2').click(function() {
        $('.show_dialog2').slideDown('fast');
        return false;
    });

    $('.ShowDialogIcon3').click(function() {
        $('.show_dialog3').slideDown('fast');
        return false;
    });

    $('.ShowDialogIcon4').click(function() {
        $('.show_dialog4').slideDown('fast');
        return false;
    });

现在我看,这有点不完整,我想做的是:

$('.ShowDialogIcon').showDialog('.showDialog');
$('.ShowDialogIcon2').showDialog('.showDialog2');
$('.ShowDialogIcon4').showDialog('.showDialog3');
$('.ShowDialogIcon4').showDialog('.showDialog4');

我想出的是:

jQuery.fn.showDialog = function(cls) {
    $(this).click(function() {
        $(cls).show('fast');
    });
}

它不起作用,任何人都可以帮忙吗？

谢谢,迈克.

Answer 1

您在错误的元素上设置click事件.

正确的jQuery插件

这相当于您的功能:

jQuery.fn.extend({
    showDialog: function(cls) {
        this.click(function(evt){
            evt.preventDefault();
            $(cls).slideDown("fast");
        });
    }
});

要停止事件冒泡,最好preventDefault在事件本身上使用函数而不是返回false.这样您就可以安全地避免浏览器的特殊性.