php - 输出文本未以正确格式显示

Question

这是我用来为从数据库读取的内容的滑块（淡入淡出效果）设置动画的 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 样式。

Answer 1

You could clone the node, and set that to be the new content of the target elements, to keep everything in jQuery objects, but personally, I'd use the .outerHTML property.

I've updated your fiddle to show you what I mean: I've changed the .text(...set content here) to .html(), because we're injecting HTML content. Then, I added [0] at the end of your selector, to return the raw element reference, which gives access to all standard JS properties and methods an element has, and just went ahead and fetched the outerHTML... easy-peasy