【问题标题】:Wordpress & jQuery Cycle Plugin - How to get caption from div that contins the_title() and the_excerpt()Wordpress & jQuery Cycle Plugin - 如何从包含 title() 和 the_excerpt() 的 div 中获取标题
【发布时间】:2011-02-25 01:24:08
【问题描述】:

我正在尝试在我目前正在开发的主题中使用 jQuery Cycle 插件。我有 jQuery Cycle 在主页上显示帖子图像的幻灯片。但是,我的问题是我无法正确显示包含 the_title() 和 the_excerpt() 作为标题的 div 的内容。 我正在使用以下代码:

<script>
    $(function() {
        $('#slideshow').cycle({
            fx:       'fadeZoom',
            timeout:   2000,
            after: onAfter
        });
    });
    function onAfter(curr,next,opts) {
        var caption = $('.featured-entry').text();
        $('#caption').html(caption);
    }
</script>

<div id="container">
    <div class="pics" id="slideshow">
        <?php
            $slideshow_posts = new WP_Query('cat=3&posts_per_page=5');
            while($slideshow_posts->have_posts())
                $slideshow_posts->the_post();
                $picture = get_post_meta($post->ID, 'picture', true);
                if(!empty($picture))
                {
                ?>
                    <div class="slideshow-inner">
                        <a class="featured-article" href="<?php the_permalink(); ?>"><img src="<?php echo $picture; ?>" /></a>
                        <div class="featured-entry">
                            <a class="entry-title" href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
                            <div class="entry-summary"><?php the_excerpt() ?></div>
                        </div>
                    </div>
                <?php
                }
            }
        ?>
    </div>
    <div id="caption"></div>
</div>

此代码的问题在于它只显示所有幻灯片的一篇文章的摘录。意思是图片改变时the_excerpt不会改变。

那么我错过了什么?这是我第一次使用 jQuery,希望有人能帮助我。

附注我知道如何从 img 的属性(例如 'alt')中获取标题,但我不想那样做,我想从 div 的内容中获取标题。

问候

-XO

【问题讨论】:

    标签: wordpress jquery-cycle caption


    【解决方案1】:

    试试this:

    function onAfter(curr, next, opts) {
        var caption = $(next).find('.featured-entry').text();
        $('#caption').html(caption);
    }
    

    $('featured-entry') 应该顺便说一句。从不工作——它不是一个有效的选择器。

    【讨论】:

    • 当我重新格式化代码时,我一定是无意中删除了类名之前的点(.);我已经编辑了我的帖子。无论如何,您的代码似乎可以按预期工作。谢谢。
    • 你好,polarblau,有没有办法对标题 div 做一些过渡效果,比如 scrollUp?也让它在滑动改变时消失?谢谢。
    • 你应该能够使用onAfteronBefore 回调来做你想要的#caption div。尝试例如$('#caption').fadeOut()onBefore 然后$('#caption').html(caption).fadeIn()onAfter。如果我没记错的话,那应该会给你一个想法。
    • 是的,这就像一个魅力,谢谢。我想投票给你的答案,但我仍然没有足够的声誉来投票,我所能做的就是感谢你。再次感谢。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-07
    • 1970-01-01
    相关资源
    最近更新 更多