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 に答える