0

データベースから読み取ったコンテンツのスライダー (フェード効果) をアニメーション化するために使用する JavaScript は次のとおりです。

<script language="javascript">
jQuery(document).ready(function ()
{
    var terms = ["span_1","span_2"];
    var i = 0;

    function rotateTerm() {
        jQuery("#text-content").fadeOut(200, function() {
          jQuery(this).text(jQuery('#text-slider .'+terms[i]).html()+i).fadeIn(200);
        });
        jQuery("#title-content").fadeOut(200, function() {
          jQuery(this).text(jQuery('#title-slider .'+terms[i]).html()+i).fadeIn(200);
           i == terms.length - 1 ? i=0 : i++;
        });
    }
    rotateTerm();
    setInterval(rotateTerm, 1000);   
});
</script>

そして、ここに私が使用するPHPコードがあります：

<?php
    if (!empty($testLst)) :     
        $num=1; 
        foreach($testLst as $key=>$item):
             $item->slug = $item->id;
             $item->catslug = $item->catid ;

?><div id="hidden-content" style="display:none;">       
    <div id="title-slider"> 
        <span class="<?php echo 'span_'.$num; ?>">
            <h4><a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($item->id, $item->catid)); ?>">
                <?php echo $item->title; ?></a>
            </h4>
        </span>
    </div>
<div id="text-slider">
    <span class="<?php echo 'span_'.$num; ?>">
        <p>
            <?php
                $concat=array_slice(explode(' ',$item->introtext),0,20);
                $concat=implode(' ',$concat);
                echo $concat."...";
            ?>
        </p>
    </span>
</div></div>
<a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($item->id, $item->catid)); ?>" title="Learn more" class="learnMore">Learn more &gt;&gt;</a></p>
<?php
    $num++;
    endforeach;
    endif;
?>

<div id="title-content">
</div>
<div id="text-content">
</div>

そして、これが私がやりたいことを再現した JSFiddle ページです。

私の問題は、HTML タグがまだ含まれているデータを取得していることですが、出力に CSS スタイルを含めたいと考えています。

4

1 に答える 1

0

ノードを複製し、それをターゲット要素の新しいコンテンツに設定して、すべてを jQuery オブジェクトに保持することもできますが、個人的には、この.outerHTMLプロパティを使用します。

私が何を意味するかを示すためにフィドルを更新しました。 HTML コンテンツを挿入しているため、.text(...set content here)をに変更しました。次に、セレクターの最後.html()に追加して、生の要素参照を返します。これにより、要素が持つすべての標準 JS プロパティとメソッドにアクセスできます。[0]outerHTML

于 2012-08-29T08:53:06.667 に答える