Combinaison de plusieurs fonctions jQuery

Question

Existe-t-il un moyen de combiner tout cela pour réduire la quantité de js? Ceci est juste un exemple de certaines des boîtes de dialogue jquery que j'ai sur mon site, il y en a quelques autres aussi. Merci.

//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

Si vos liens pointent vers les ID des éléments de dialogue, et si vous ajoutez une méta classe choose à chacun d'eux, vous pouvez combiner les trois derniers appels à:

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

Le code HTML pour un de ces liens est le plus sémantiquement correct et fonctionne même avec JS désactivé (en supposant, les dialogues sont là, alors):

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

la this.hash partie explique:

• this dans le cadre d'une fonction de gestion des événements jQuery est toujours l'élément, que l'événement est apparu à. Dans notre cas, c'est le lien cliqué. Notez que c'est le nœud DOM , pas un élément jQuery.

• this.hash: noeuds DOM, qui correspondent à HTML <a/> éléments, ont certaines propriétés particulières, qui permettent d'accéder à la cible qu'ils liez. La propriété hash est tout (et inclus) un caractère # dans l'URL. Dans notre cas, si le lien pointe vers les éléments qui devraient devenir des boîtes de dialogue, c'est quelque chose comme la chaîne "#chooseMoreCnt".

• $(this.hash) est la fonction jQuery appelé, par exemple, "#chooseMoreCnt", qui permet de sélectionner le div approprié.

Pour l'initialisation de dialogue, je voudrais aussi aller pour les classes:

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

Oui, cela signifie changer le balisage, mais il vous offre également la liberté de

1. ajouter un nombre quelconque de boîtes de dialogue lateron

2. ajouter un nombre d'ouvreurs à toute boîte de dialogue lateron

3. style de tous les dialogues et des liens vers des boîtes de dialogue consistantly avec CSS minimum

sans toucher le Javascript plus.

Si les dialogues sont initiés différemment (comme mentionné dans les commentaires), alors vous pouvez opter pour cette partie à l'approche $.each() de CuSS et lire la largeur appropriée à l'intérieur de la fonction d'un objet défini ailleurs:

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

Answer 2

Eh bien, c'est un peu compliqué à minimiser. avez-vous plus de 3 boîtes de dialogue?Si oui, vous pouvez faire quelque chose comme ceci:

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

Answer 3

Afin d'optimiser les performances, vous devez utiliser live lors de la connexion à plusieurs éléments. Voici mon approche du problème. La solution est dynamique (ajoutez autant de dialogues que vous le souhaitez) et très rapide. N'oubliez pas de remplacer #anyParentOfTheLinks par le div parent ou, dans le pire des cas, de le supprimer et jQuery utilisera le document à la place.

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

C'est ce que je suggérerais. Spécifiez un DialogContent général (par exemple) la classe à tous les divs et les initialiser en utilisant:

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

Et utiliser ofcourse solution de Boldewyn pour l'événement clic (il se se générés dynamiquement est préférable d'utiliser en direct() à mon humble avis, si les choses). De cette façon, vous vous occupez de toutes les initialisations et cliquez sur les événements avec moins de code.

HTH