动态元素中的Jquery样式化内容 - jquery styling content in dynamic element

jquery styling content in dynamic element

本文关键字：样式 Jquery 元素动态 | 更新日期: 2023-09-27

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

标题使用span样式，但是当它们被放置到名为"。标题"它们没有样式，所有文本都在一起运行。

如何将样式和格式应用到"。标题"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标签

重读问题后，您似乎需要.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/

你可以使用。addclass

应用一个css类

<style>
    .capStyle
    {
        color: red;
    }
</style>
$(".captions").addClass("capStyle");