Переключить сообщения в WordPress с помощью JQuery - PullRequest
Новая
       14

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

1 голос
/ 10 сентября 2010

Я пытаюсь сделать что-то, чего раньше не видел в 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 a секция переключателя скользит вниз и показывает содержимое.Когда выбран какой-либо один переключатель, отображается все содержимое.Мне бы хотелось, чтобы каждый переключатель был уникальным в цикле WP и отображал только содержимое этой записи.Есть идеи?

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

1 Ответ

4 голосов
/ 10 сентября 2010

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

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

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

...