输出文本不't以正确格式显示

Output Text Doesn't Show in Correct Format

本文关键字：格式 显示 文本 输出      更新时间：2023-09-26

以下是我用来为从数据库中读取的内容的滑块（渐变效果）设置动画的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样式。

您可以克隆节点，并将其设置为目标元素的新内容，以将所有内容保留在jQuery对象中，但就我个人而言，我会使用.outerHTML属性。

我已经更新了你的fiddle，向你展示了我的意思：我已经将.text(...set content here)更改为.html()，因为我们正在注入HTML内容。然后，我在选择器的末尾添加了[0]，以返回raw元素引用，该引用允许访问元素所具有的所有标准JS属性和方法，然后继续获取outerHTML。。。易peasy

相关文章：