php - 动态元素中的 jquery 样式内容

Question

我正在使用 jquery 插件 flexslider 来显示一些图像和标题。我正在使用下面的代码从 flexslider 内容中取出标题并将其放入外部元素中。

标题是使用 span 设置样式的，但是当它们被放入名为“.captions”的新元素中时，它们没有设置样式，所有文本都放在一起。

如何将样式和格式应用于“.captions”div 中的文本？

    <script type="text/javascript" charset="utf-8">
    $(window).load(function() {

    $captions = $('.captions');

    $('.flexslider').flexslider({
        animation: "fade",
        controlNav: "thumbnails",
        directionNav: true,
        slideshow: false,
        useCSS: true,
        touch: true,
        start: function() {
            $activecaption = $('.flex-active-slide .flex-caption');
            $captions.html($activecaption.text());        
        },
        after: function() {
            $activecaption = $('.flex-active-slide .flex-caption');
            $captions.html($activecaption.text());
        }
    }); 
    });
</script>

例如我正在呼应这个:

echo "<span class='artwork-title'>$page->title</span>,<span class='artwork-year'>     $artwork->date</span><span class='artwork-year'>$artwork->dimensions</span>";

我的 jquery 似乎摆脱了 span 标签。

Answer 1

重读问题后，您似乎需要 .captions 元素中的事件标题。您所要做的就是将 .text() 切换为 .html()，所有元素都应该随之而来。

$(window).load(function() {
    $captions = $('.captions');

    $('.flexslider').flexslider({
        animation: "fade",
        controlNav: "thumbnails",
        directionNav: true,
        slideshow: false,
        useCSS: true,
        touch: true,
        start: function() {
            $activecaption = $('.flex-active-slide .flex-caption');
            $captions.html($activecaption.html());        
        },
        after: function() {
            $activecaption = $('.flex-active-slide .flex-caption');
            $captions.html($activecaption.html());
        }
    }); 
});

引用:http://www.woothemes.com/flexslider/