Parcourir des éléments pour afficher des informations

lakamark
Javascript

Bonjour,
J'aimerais savoir comment on peut faire pour que jQuery puisse parcourir des éléments html quand l'utilisateur demande d'afficher des informations.

Je sais que la fonctin each(); permet de faire parcourir des éléments.

Voci le code source de la page html :

<div class="container">
    <div class="row">
                <div class="span4 user">
            <img src="http://www.gravatar.com/avatar/2137cc83a8e3a74d9516abadd576fef8.png" class="img-polaroid" style="border: 1px solid #99CC00; background: #99CC00; border: 1px solid rgba(0, 0, 0, 0.2);">
            <p class="btnn"><a href="#" id="btnn">Afficher les informations</a></p>
        <div class="user-informations" id="1">
            <h6>Informations</h6>
            <h6>Biographie</h6>
            <p> J'étudie en ce moment dans le mutlimédia et dans ce mondes très vaste il y a un champ d'intérêt qui m'attire le plus est le coté sonore. Un monde où peut de gens s'y avanturent. Dans mes temps libres, je compose de la musique pour mes divers projets personnels.
Selon moi, un projet est beaucoup plus vivant avec de la musique en arrière-plan. Cela nous permette d'admirer le projet sous une autre forme. Je ne créer pas seulement de la musique, je fait aussi des arts visuels. Dans mon domaine d'étude, j'apprend des techniques d'art visuels.</p>
            <h6>Style de musique</h6>
            <p>Dance, Techno, Cinema, Classical, Ambiance, House, </p>
            <br
            <p> <a href="/profil/1" class="btn btn-primary">Voire le profil</a></p>
        </div>
        </div>
                <div class="span4 user">
            <img src="http://www.gravatar.com/avatar/" class="img-polaroid" style="border: 1px solid #222222; background: #222222; border: 1px solid rgba(0, 0, 0, 0.2);">
            <p class="btnn"><a href="#" id="btnn">Afficher les informations</a></p>
        <div class="user-informations" id="2">
            <h6>Informations</h6>
            <h6>Biographie</h6>
            <p> </p>
            <h6>Style de musique</h6>
            <p></p>
            <br
            <p> <a href="/profil/2" class="btn btn-primary">Voire le profil</a></p>
        </div>
        </div>
                <div class="span4 user">
            <img src="http://www.gravatar.com/avatar/" class="img-polaroid" style="border: 1px solid #ffc000; background: #ffc000; border: 1px solid rgba(0, 0, 0, 0.2);">
            <p class="btnn"><a href="#" id="btnn">Afficher les informations</a></p>
        <div class="user-informations" id="3">
            <h6>Informations</h6>
            <h6>Biographie</h6>
            <p> </p>
            <h6>Style de musique</h6>
            <p></p>
            <br
            <p> <a href="/profil/3" class="btn btn-primary">Voire le profil</a></p>
        </div>
        </div>
                <div class="span4 user">
            <img src="http://www.gravatar.com/avatar/" class="img-polaroid" style="border: 1px solid #222222; background: #222222; border: 1px solid rgba(0, 0, 0, 0.2);">
            <p class="btnn"><a href="#" id="btnn">Afficher les informations</a></p>
        <div class="user-informations" id="4">
            <h6>Informations</h6>
            <h6>Biographie</h6>
            <p> </p>
            <h6>Style de musique</h6>
            <p></p>
            <br
            <p> <a href="/profil/4" class="btn btn-primary">Voire le profil</a></p>
        </div>
        </div>
                <div class="span4 user">
            <img src="http://www.gravatar.com/avatar/" class="img-polaroid" style="border: 1px solid #222222; background: #222222; border: 1px solid rgba(0, 0, 0, 0.2);">
            <p class="btnn"><a href="#" id="btnn">Afficher les informations</a></p>
        <div class="user-informations" id="5">
            <h6>Informations</h6>
            <h6>Biographie</h6>
            <p> </p>
            <h6>Style de musique</h6>
            <p></p>
            <br
            <p> <a href="/profil/5" class="btn btn-primary">Voire le profil</a></p>
        </div>
        </div>
            </div>
</div>

j'ai mis un id unique dans chaque éléments. Vous avez une balise ".user-info" qui est caché par défault quand il l'utilisateur cliquera sur le lien «Afficher les information» l'élément que l'id où le lien à été cliqué cette balise affiche.

Je ne veux pas que tous les autre s'ouvre juste seulement un.

Merci de votre aide en avance.

2 réponses

Maenhyr
Réponse acceptée

Salut,
alors tout d'abord, tu n'as pas le droit de mettre plusieurs fois le même id. Il faut le transformer en class.
Je vais donc mettre la classe btn-link à tes liens . 

<a href="#" id="btn-link">Afficher les informations</a></p>

ceci devrait réaliser ce que tu souhaites : 

jQuery(function() {
    // listener sur le clic sur un des boutons 'afficher les informations'    
    $('.btn-link).click(function(e) {
        // on recupere l'objet cliqué
        var $link = $(this);
        // on recupere la div d'informations située juste après le lien cliqué dans le DOM
        var $infos = $link.parent().next('.user-informations');
        // on cache toutes les div informations, au cas où il y en aurait une d'ouverte
        // ceci fait une boucle implicite ( equivalent à $('.user-informations.each(function() { $(this).hide() });
        $('.user-informations').hide();

        // on affiche la bonne div d'informations
        $infos.show();

        // on annule le comportement par défaut du lien, c'est à dire de rediriger vers l'url enregistrée
        e.preventDefault();    
    });
});

Et avec ça tu peux enlever tous les id pour tes classes .user-informations

Voici le JSBin fonctionnel : http://jsbin.com/atuhek/1/

lakamark
Auteur
Réponse acceptée

Merci