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]，以返回 raw 元素引用，该引用允许访问元素具有的所有标准JS属性和方法，并且只是继续并获取outerHTML ...轻松 -

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

1 个答案: