0

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

字幕使用跨度设置样式，但是当它们被放置到名为“.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 标签。

4

2 回答 2

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/

于 2013-03-18T18:56:26.540 回答
0

您可以使用 .addClass 应用 css 类

<style>
    .capStyle
    {
        color: red;
    }
</style>

$(".captions").addClass("capStyle");
于 2013-03-18T18:10:13.877 回答