Jquery read more toggle button работает только с одним сообщением в блоге.

У меня проблемы с запуском моей кнопки jQuery. Это мои первые руки на опыте с ним, так что легко на меня.

В настоящее время кнопка работает... но только когда у меня есть сообщение "ONE". Поскольку его wordpress и сайт будут иметь несколько сообщений, моя кнопка не работает.

Вот код для моего сообщения.

<div id="blog_posts"><code>
 <!--?php query_posts ('posts_per_page=5&paged='.get_query_var('paged')); ?--> 
 <!--?php if (have_posts()) : while (have_posts()) : the_post(); ?-->

 <div>

 <div>
 <!--?php the_post_thumbnail(); ?-->
 
 </div>

 <div>
 <div>
 <!--?php the_title(); ?-->
 </div>
 <div>
 <!--?php include (TEMPLATEPATH . '/inc/meta.php' ); ?-->
 </div>
 </div>

 <div>
 <!--?php the_excerpt(); ?-->
 read more...
 </div>
 
 <div id="blog-content-more">
 <!--?php the_content(); ?-->
 read less...
 
 </div>
 
 </div>
</code> <p> Вот код для моей кнопки JQuery (ниже), которая скрывает текстовую кнопку для чтения и отображает div-blog-content-more. Кнопка также отображает текстовую кнопку "читать меньше", и когда она нажата, скрывает только что выведенный div.</p> <pre class="prettyprint linenums">//BLOG TOGGLE BUTTON : READ MORE
$( "#read-more-blog" ).click(function() {

 $( "#read-more-blog" ).toggle( "slow");

 var this_blog = $( "#read-more-blog" );

 if ($("#blog-content-more:visible").length == 0){

 this_blog.addClass('clicked'); 
 }
 else
 {
 this_blog.removeClass('clicked');
 }

 $( "#blog-content-more" ).toggle( "slow");
});


//BLOG TOGGLE BUTTON : READ LESS
$( "#read-less-blog" ).click(function() {
 $( "#blog-content-more" ).toggle( "slow" );
 $( "#read-more-blog" ).toggle( "slow");
});

поэтому мой вопрос... как я могу заставить свою кнопку jquery работать, когда на моей странице есть несколько версий html?

Я смотрел на синтаксис родителей и сиблингов, но почесывал голову.

Надеюсь, кто-то может помочь. благодаря

2 ответа

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

как в этой скрипке http://jsfiddle.net/sN3Wk/

$( ".read-more, .read-less" ).click(function() {});

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


Замените все ID в блоге blog_posts классами и попробуйте следующее:

$( ".read-less-blog" ).click(function() {
 var $this = $(this);
 $this.find(".blog-content-more").toggle( "slow" );
 $this.find(".read-more-blog").toggle( "slow");
});

То же самое для read-more-blog.

licensed under cc by-sa 3.0 with attribution.