Question

我使用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标签。

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/

Answer 2

您可以使用.addClass

应用css类

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

$(".captions").addClass("capStyle");

动态元素中的jquery样式内容

2 个答案: