Переключить сообщения в wordpress с помощью jquery

Question

Я пытаюсь сделать что-то, чего я раньше не видел в wordpress. В основном, когда вы приходите в блог, отображается заголовок, миниатюра и выдержка. Когда нажата кнопка переключения, сообщение должно скользить вниз, чтобы показать содержимое. (<?php the_content(); ?>)

Вот мой Jquery:

$(document).ready(function() { 
      $('span.play a').click(function() { 
       if ($('.toggleSection').is(":hidden")) 
       { 
        $('.toggleSection').slideDown("slow"); 
       } else { 
        $('.toggleSection').slideUp("slow"); 
       } 
       return false; 
      }); 
    }); 

Он отлично работает! Однако; потому что переключатель помещается внутри цикла wordpress, всякий раз, когда нажимается кнопка переключения, все сообщения переключаются в открытые. Например, если у меня есть 10 сообщений на странице, и одна кнопка переключения нажата, все переключатели открываются. Вот мой WP цикл:

<?php if(have_posts()) : while(have_posts()) : the_post(); ?> 
       <div class="post" id="<?php the_ID(); ?>"> 
        <div class="thumbnail"> 
         <?php the_post_thumbnail('mainimg'); ?> 
         <span class="play"><a href="#" onclick="jQuery('#comments').toggle();"><img src="<?php echo bloginfo('template_url'); ?>/images/play.png" width="30" height="36" alt="Play Video"></a></span> 
        </div> 


        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
        <h3>Posted in: <span><?php the_category(', ') ?> </span>On: <span><?php the_time('l, F jS, Y') ?></span></h3> 

        <div class="entry"> 
         <p><?php the_excerpt(); ?> </p> 
        </div> <!-- entry --> 

        <div class="toggleSection"> 
        <p><?php the_content(); ?> </p> 
        </div> 



       </div> <!-- .post --> 

       <?php endwhile; ?> 

То, что вы видите выше, является то, что при span.play щелчке по togglesection скользит вниз и раскрывает содержание. Когда выбран какой-либо один переключатель, появляется все содержимое. Я бы хотел, чтобы каждый переключатель был уникальным в пределах цикла WP, и только показывает содержимое этой записи. Есть идеи?

Вы можете увидеть демонстрацию моей работы до сих пор здесь: http://vitaminjdesign.com/littlewindow/ Нажмите кнопку воспроизведения над миниатюрами для переключения!

Answer 1

Вы можете похудеть текущий код и решить проблему с переключая все из них, как это:

$(function() { 
    $('span.play a').click(function() { 
    $(this).closest('.post').find('.toggleSection').slideToggle(); 
    return false; 
    }); 
}); 

Это идет до .post элемента с помощью .closest() затем делает .find(), чтобы получить .toggleSection только внутри это.post. Затем код переключения может быть сведен к нулю только до звонка .slideToggle(). Вышеуказанные центры вокруг использования текущего элемента, $(this), затем обход, чтобы найти элементы, которые вы используете после использования tree traversal functions.