2010-08-14 6 views
2

Je crée une page d'archive personnalisée, qui affiche la liste des publications avec leur extrait, et un bouton qui permet de basculer le reste du contenu du message. Je l'ai en train de travailler avec ce code, sauf que ça change TOUS les messages post lol parce que dans la boucle ils ont tous la classe tu sais ce que je veux dire?Aide pour certains jQuery dans une boucle Wordpress

Pouvez-vous m'aider à trouver une solution? Il doit y avoir un moyen de le faire fonctionner dans la boucle, n'est-ce pas? Voici le code (échec) que j'ai jusqu'à présent, Merci! `

<div id="more_content"> 
    <a href="#" class="see_all">More</a> 
    <div class="content_hidden" style="display:none;"> 
     <div class="copy"> 
     <?php the_content(); ?> 
     </div> 

     <p class="tags"><?php the_tags(); ?></p> 
     <?php comments_template(); ?> 
    </div> 
</div> 

<script type="text/javascript" charset="utf-8"> 

$('.see_all').click(function() { 

if ($(this).html() == 'More'){ 
    $('.content_hidden').toggle('slow'); 

    $(this).html('Less'); 



} 
else if ($(this).html() == 'Less'){ 

    $('.content_hidden').slideUp('slow'); 
    $(this).html('More'); 

} 

return false; 

}); 

`

Répondre

0

Utilisez

<?php the_ID(); ?> 

pour définir l'ID HTML de l'élément, puis Javascript pour sélectionner l'ID de le conteneur que vous vouliez t à révéler.

2

Cela devrait fonctionner:

$('.see_all').click(function() { 
    if ($(this).html() == 'More'){ 
     $(this).parent().find('.content_hidden').toggle('slow'); 
     $(this).html('Less'); 
    } else if ($(this).html() == 'Less'){ 
     $(this).parent().find('.content_hidden').slideUp('slow'); 
     $(this).html('More'); 
    }   
    return false; 
}); 

Pour vous citer:

il permet de basculer CHAQUE contenu post lol parce que dans la boucle, ils reçoivent tous la classe vous savez ce que je veux dire

Ce que vous devez faire est d'adresser le .content-hidden dans ou relatif à chaque conteneur du lien cliqué, par opposition à tous les adresser en même temps. De plus, il est possible que vous répétiez des identifiants dans votre document (ce qui est mauvais, interdit, tabou, ne pas faire, invalide, contre spécification, ne fonctionnera pas, etc.). Donc, votre <div id="more_content"> devrait peut-être être plutôt <div class="more_content">

+0

Aha! Merci, lol j'ai espacé sur l'ID là, bonne prise merci. Donc, cela fonctionne principalement, par exemple, il y a deux messages. Le second fonctionne comme il se doit, le premier cependant, en cliquant dessus, il glisse vers le bas, puis remonte immédiatement ... – thatryan

+0

Des idées sur la raison pour laquelle la première div glisserait vers le bas alors que la seconde fonctionnerait correctement? – thatryan