0


0

Référencer plusieurs ID dans un appel JQuery

Nouveau sur Jquery et je pense que la plupart de mes problèmes proviennent d’hypothèses basées sur les nombreuses autres langues que j’utilise. La question implique actuellement la traversée absolue d’un identifiant HTML. Par exemple, étant donné plusieurs ensembles de code HTML avec des identifiants différents:

        test




    var a = ['#navi0', '#navi1', '#navi2'];
    var b = ['#content0', '#content1', '#content2'];

    $(a[0] + ' .expand').css({'background-color': '#017693', 'height': '50px'});
    $(a[1] + ' .expand').css({'background-color': '#01D092', 'height': '50px'});
    $(a[2] + ' .expand').css({'background-color': '#D0013F', 'height': '50px'});

    for(i = 0; i <= 2; i++) {
        $(a[i] + ' a').click(function() {

            for(j = 0; j <= 2; j++) {
                if($(a[j] + ' .expand').css('height') == '300px') {
                    $(a[j] + ' .expand').animate( {
                        height: '0px'
                    }, 500);
                    $(b[j]).animate( {
                        width: '100px'
                    }, 500);

                }
            }

            $(this).next().animate( {
                height: '300px'
            }, 500);

            $(b[i]).animate( {
                width: '500px'
               }, 500);

        });
    }

Tout cela pour tester le fonctionnement de Jquery. En ce qui concerne la question, la dernière animation tente de jouer sur un identifiant qui ne fait pas partie du «ceci» actuel ou du parent de «ceci» du tout. Comment puis-je y arriver avec cette configuration et mon utilisation du tableau «b» est-elle appropriée? Serait-il préférable d’utiliser une classe générale plutôt que des identifiants de contenu uniques?

J’ai toujours été très attentif au bon code, alors n’hésitez pas à donner des conseils comme bon vous semble.

3 Answer


1


D’accord, j’ai donc créé un jsFiddle et modifié votre code. Vous verrez que vous n’avez pas du tout besoin d’utiliser des boucles pour lier les gestionnaires. J’ai donné à chaque div son propre ID, donc vous définissez la couleur de la bordure et de l’arrière-plan à l’aide de CSS (après tout, c’est à cela que sert CSS).

Le code va comme ceci:

$(function() {
    $('.link').click(function() {
        $(".link").not(this).each(function() {
            $(this).find("div.wrap").hide();
            $(this).find("div.expand").animate({
                height: "0px"
            }, 300);

            $(this).find("div.services").animate({
                width: "0px"
            }, 300);
        });

        $(this).find("div.expand").animate({
            height: "300px"
        }, 500);

        $(this).find("div.services").animate({
            width: "647px"
        }, 500, "", function() {
            $(this).find("div.wrap").fadeIn("slow");
        });
    });
});


0


Utilisez join:

$(b.join(','))

Voir un exemple ici:


0


Plutôt que d’essayer d’exécuter le même code encore et encore avec des boucles for, vous pouvez utiliser des classes et laisser jQuery appliquer automatiquement le même code à plusieurs objets avec la même classe.

Tout d’abord, changez le HTML en ceci:

        test

Les modifications consistent à ajouter une classe au nav div de niveau supérieur et à placer une classe sur le lien et sur le contenu.

Ensuite, vous pouvez utiliser ce code pour répondre au clic:

$(".nav .toggle").click(function() {
    var this$ = $(this);
    var parent$ = this$.closest(".nav");
    // get all .expand elements that are not in the one we clicked on
    $(".nav").not(parent$).find(".expand").each(function() {
        var self = $(this);
        if (self.css("height") == "300px") {
            self.animate({height: "0px"}, 500);
            self.closest(".nav").find(".content").animate({width: "100px"}, 500);
        }
    });
    // set the state of the one clicked on
    this$.next().animate({height: "300px"}, 500);
    parent$.find(".content").animate({width: "500px"}, 500);
});

Vous remarquerez qu’il n’y a aucune boucle for. Il utilise simplement soit .each () de jQuery, soit le fait que jQuery fonctionnera sur tous les éléments qui correspondent au sélecteur sans itération manuelle.

Ce code comporte deux sections. La première section opère sur les éléments .nav qui ne sont pas celui sur lequel on a cliqué (pour réinitialiser leur état) et la deuxième section opère sur l’élément` .nav` qui est celui sur lequel on a cliqué. Il n’utilise aucun ID, mais va plutôt au parent .nav et le trouve les éléments pertinents par nom de classe dans le bloc sur lequel il travaille.

Si vous contrôlez la page HTML complète, je vous recommande d’utiliser CSS pour définir la couleur et la hauteur d’arrière-plan initiales plutôt que javascript:

.nav {height: 50px;}
#nav1 {background-color: #017693;}
#nav2 {background-color: #01D092;}
#nav3 {background-color: #D0013F;}

Si vous deviez le faire avec javascript, vous pouvez l’utiliser pour éviter la répétition du code et le rendre piloté par table:

var naviSettings = [
    {sel: '#navi0', bColor: '#017693'},
    {sel: '#navi1', bColor: '#01D092'},
    {sel: '#navi2', bColor: '#D0013F'}
];

for (var i = 0; i < naviSettings.length; i++) {
    var item = naviSettings[i];
    $(item.sel + " .expand").css({"background-color": item.bColor, height: "50px"})
}