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

Вы устанавливаете событие клика не на том элементе.

Правильный плагин jQuery

Это эквивалентно вашей функциональности:

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

Чтобы остановить событиепузыриться лучше использовать функцию preventDefault для самого события, чем возвращать false.Таким образом, вы можете безопасно избежать особенностей браузеров.

Answer 2

Мой обычный подход к этой ситуации - сначала дать класс, который разделяют все значки диалога, и добавить к значку диалога атрибут, указывающий на диалог, который вы хотите показать.Например:

<a href="#show_dialog1" class="ShowDialogIcon">Show first</a> //href points to the dialog that will slide
<a href="#show_dialog2" class="ShowDialogIcon">Show first</a>  

$(".ShowDialogIcon").click(function(){
    //use the href attribute
    var dialog = $(this).attr("href").replace("#",".");  
    $(dialog).slideDown("fast");  //slidedown
    return false; 
});

Answer 3

Если вы хотите настроить плагин jQuery для этого:

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

$("#foo").showDialog(".bar");

См. здесь , чтобы узнать, как создать плагин.