Объединение нескольких функций jQuery

Question

Есть ли способ объединить все это, чтобы уменьшить количество js? Это всего лишь пример некоторых диалогов jquery, которые есть на моем сайте, есть и другие. Спасибо.

//initiate Search refinement dialog here
$("#chooseMoreCnt, #chooseMoreCat, #chooseMorePr").dialog({
    bgiframe: true,
    autoOpen: false,
    width: 500,
    modal: true,
    open: function(type, data) {
        $(this).parent().appendTo(jQuery("form:first"));
    }
});

//trigger country dialog
$('a.chooseMoreCnt').click(function() {
    $('#chooseMoreCnt').dialog('open');
    return false;
});

//trigger category dialog
$('a.chooseMoreCat').click(function() {
    $('#chooseMoreCat').dialog('open');
    return false;
});

//trigger price dialog
$('a.chooseMorePr').click(function() {
    $('#chooseMorePr').dialog('open');
    return false;
});

Answer 1

Если ваши ссылки указывают на идентификаторы элементов диалога, и если вы добавляете метакласс choose к каждому из них, вы можете объединить последние три вызова с:

$('a.choose').click(function() {
    $(this.hash).dialog('open');
    return false;
});

HTML-код для одной из этих ссылок является наиболее семантически правильным и даже работает с отключенным JS (при условии, что диалоги есть):

<a href="#chooseMoreCat" class="choose">Choose more categories</a>

Часть this.hash объяснила:

• this в контексте функции обработки событий jQuery всегда есть элемент, в котором произошло событие. В нашем случае это нажатая ссылка. Обратите внимание, что это узел DOM , а не элемент jQuery.

• this.hash: Узлы DOM , которые соответствуют элементам HTML <a/>, имеют определенные специальные свойства, которые позволяют получить доступ к цели, на которую они ссылаются. Свойство hash - это все после (и включая) символ # в URL. В нашем случае, если ссылка указывает на элементы, которые должны стать диалогами, это что-то вроде строки "#chooseMoreCnt".

• $(this.hash) - это вызванная функция jQuery, например, "#chooseMoreCnt", которая выберет соответствующую div.

Для инициализации диалога я бы также выбрал классы:

$(".choose_dialog").dialog({
    bgiframe: true,
    autoOpen: false,
    width: 500,
    modal: true,
    open: function(type, data) {
        $(this).parent().appendTo(jQuery("form:first"));
    }
});

Да, это означает, что нужно изменить разметку, но она также предоставляет вам свободу

1. добавить любое количество диалогов позже

2. добавить любое количество открывателей в любой диалог позже

3. стиль всех диалогов и ссылок на них последовательно с минимальным CSS

больше не трогая Javascript.

Если диалоги инициируются по-другому (как упомянуто в комментариях), то вы можете перейти к этой части с подходом CuSS $.each() и прочитать соответствующую ширину внутри функции из объекта, определенного в другом месте:

var dialog_widths = {'chooseMoreCat': 400, 'chooseMorePr': 300, /*...*/ };

Answer 2

Это то, что я бы предложил. Укажите общий класс DialogContent (скажем) для всех элементов div и инициализируйте их, используя:

$(".dialogContent").dialog({
    bgiframe: true,
    autoOpen: false,
    width: 500,
    modal: true,
    open: function(type, data) {
        $(this).parent().appendTo(jQuery("form:first"));
    }
});

И, конечно же, используйте решение Болдевина для события клика (лучше использовать live () IMHO, если вещи генерируются динамически). Таким образом, вы позаботитесь обо всех инициализациях и кликните события с меньшим количеством кода.

НТН

Answer 3

Чтобы оптимизировать производительность, вы должны использовать live при подключении к нескольким элементам. Ниже мой подход к проблеме. Решение динамическое (добавьте столько диалогов, сколько хотите) и очень быстрое.

Не забудьте изменить #anyParentOfTheLinks на родительский div или, в худшем случае, удалить его, и вместо этого jQuery будет использовать document.

var dialogues = ['#chooseMoreCnt', '#chooseMoreCat', '#chooseMorePr'];

$(dialogues.toString()).dialog({
    // ...
});

$('a', '#anyParentOfTheLinks').live('click', function(){
    // Cache for performance
    var $this = $(this), len = dialogues.length;

    for(var i = 0; i < len; i++)
        if($this.is('.' + dialogues[i].substr(1))) {
            $this.dialog('open');
            break;
        }

    return false;
});

Answer 4

ну, это немного сложно минимизировать. у вас есть более 3 диалогов? Если да, вы можете сделать что-то вроде этого:

var dialogs=["chooseMorePr","chooseMoreCat","chooseMoreCnt"];
$.each(dialogs,function(i,v){
    $('a.'+v).click(function(){$('#'+v).dialog('open');});
});