输出文本不正确的格式显示

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> 

和here is a JSFiddle page再现我想要做的事情。

我的问题是，我得到的数据仍然有HTML标签，但是我希望输出具有我的CSS样式。

Answer 1

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

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