Question

我无法让我的jQuery按钮工作。这是我第一次亲身体验它，所以对我来说很容易。

目前按钮有效...但只有当我有“ONE”博客帖子时。由于它的wordpress和网站将有多个帖子我的按钮不起作用。

这是我的帖子的代码。

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

                        <div class="post-wrap blog">

                            <div class="post-thumbnail">
                                <?php the_post_thumbnail(); ?>
                                <div style="clear: both;"></div>
                            </div>

                            <div class="blog-block2">
                                <div class="post-title blog">
                                    <?php the_title(); ?>
                                </div>
                                <div class="post-meta blog">
                                    <?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>
                                </div>
                            </div>

                            <div class="post-content blog">
                                <?php the_excerpt(); ?>
                                <a id="read-more-blog" class="read-more">read more...</a>
                            </div>
                            <div style="clear: both;"></div>
                            <div id="blog-content-more" class="post-content-more blog">
                                <?php the_content(); ?>
                                <a id="read-less-blog" class="read-less">read less...</a>
                                <div style="clear: both;"></div>
                            </div>
                            <div style="clear: both;"></div>
                        </div>

这是我的Jquery按钮（下面）的代码，它隐藏了更多文本按钮，并显示了blog-content-more div。该按钮还显示“读取较少”文本按钮，单击该按钮时会隐藏刚刚弹出的div。

//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");
});

所以我的问题是......当我的页面上有多个版本的html时，如何让我的jquery按钮工作？

我一直在研究父母和兄弟语法，但一直在摸索着这个问题。

希望有人可以提供帮助。感谢

Answer 1

将blog_posts div中的所有ID替换为类，并尝试：

$( ".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也是如此。

Answer 2

如果我理解正确，每个帖子都有一组按钮，如果是这样，您将需要依赖将分配给所有按钮的class属性

像这个小提琴一样 http://jsfiddle.net/sN3Wk/

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

有更好的方式来访问元素，但主要的想法是你必须以通用的方式思考

jquery阅读更多切换按钮仅适用于一篇博文。

2 个答案: