web-dev-qa-db-fra.com

Afficher le contenu de click sur jquery

J'essaie d'afficher le contenu d'une publication en cliquant.

le problème que je rencontre est que l'affichage affiche toujours le même contenu.

Je veux dire par cliquer sur lire pour le post A, il affiche le_contenu du post A, mais aussi celui du post B, du post C, etc.

Voici mon code d'origine:

 <ul class="top-stories">  <?php query_posts('showposts=2&post_type=post'); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

                             <li>
                                <a href="<?php the_permalink(); ?>" rel="bookmark">
                                    <div class="top-story-image"> <?php the_post_thumbnail('small-thumb'); ?>
                                    </div><!--top-story-image-->

                                         <h2><?php the_title(); ?></h2>
                                </a>
                                         <a class="go" href="javascript:void(0)">read more</a>
                                         <div class="pop" style="display:none"><?php the_content(); ?></div>
                            </li>

                               <?php endwhile; else : ?><p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p> <?php endif; ?>

                        </ul>

et mon jquery:

$(document).ready(function() {
  $('a.go').click(function() {
   $('.pop').fadeIn('500');
    });

Pour résoudre ce problème, je suis en train d’essayer d’attribuer une classe de pos-ID et d’utiliser une variable. Cependant, mes compétences en jquery sont malheureusement limitées.

Jusqu'ici, j'ai essayé ceci:

<ul class="top-stories">  <?php query_posts('showposts=2&post_type=post'); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

                             <li>
                                <a href="<?php the_permalink(); ?>" rel="bookmark">
                                    <div class="top-story-image"> <?php the_post_thumbnail('small-thumb'); ?>
                                    </div><!--top-story-image-->

                                         <h2><?php the_title(); ?></h2>
                                </a>
                                          <a id="go_<?php echo($post->ID); ?>" href="javascript:void(0)">read more</a>
                                         <div class="pop_<?php echo($post->ID); ?>" style="display:none"><?php the_content(); ?></div>
                            </li>

                               <?php endwhile; else : ?><p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p> <?php endif; ?>

                        </ul>

et en utilisant jquery:

   $('a#go_' + post_id).html();).click(function() {
  var post_id = $(this).attr('id');
    if (post_id != '') {
      var content = $('.pop_' + post_id).html();
      $('.pop').html(content).show();
      });

mais ça ne marche pas ..

Tout highlite - ou si je suis sur la bonne voie serait incroyable;

je vous remercie !

loopget-posts
1
tibewww

Veuillez essayer le javascript suivant, vous devez ajouter class à une balise pour en savoir plus.

<a class='readmode'>Read More</a>

$('.readmode').click(function() {
     $(this).siblings('.pop').slideToggle();
     return false;
});

Voici la démo http://jsfiddle.net/fvcvyc1e/4/

1
Mitul