更改jQuery字幕文本和css/样式

Changing jQuery marquee text and css/style

本文关键字：css 样式 文本 jQuery 字幕 更改      更新时间：2023-09-26

我有div

<div id="rotatingText" class="marquee">
</div>

并且在窗口加载时初始化该div上的字幕

jQuery('.marquee').marquee({
        duration: 3000,
        gap: 50,
        delayBeforeStart: 0,
        direction: 'left',
        duplicated: false
    });

现在，在成功之后，我需要在ajax上更改该div的文本和css。我在ajax响应中获得了新的文本和css属性。使用该文本和css，我调用以下内容：

function setRotatingTextProperties( value, css, objectId )
{
    var object = document.getElementById( objectId );
    object.innerHTML = value;
    jQuery ( object ).attr( 'style', css );
}

在那个帐篷停止工作之后。我认为jQuery marquee在div中设置了一些样式，我用覆盖它

jQuery ( object ).attr( 'style', css );

如果我只是添加我的css到现有的

var currentCss = jQuery ( object ).attr( 'style');
jQuery ( object ).attr( 'style', currentCss + css );

通过多次更改，我最终会得到大量不可用的css。css会定期更改（每五秒钟）。。。任何建议和想法都将不胜感激。提前Thx。

实际上，我认为你的问题不在css和：中

jQuery ( object ).attr( 'style', css );

根据我的经验，jQuery字幕的问题在于文本的更改。所以你的问题是：

object.innerHTML = value;

最佳解决方案（如果您可以更改该页面的html）是在其中添加span：

<div id="rotatingText" class="marquee">
        <span id="rotatingTextSpan"></span>
    </div>

并更改跨度文本和div的样式，比如：

function setRotatingTextProperties( value, css )
{
        // change span text value
        $( '#predefineImageRotatingTextSpan' ).text( value );
        // change css value on div
        $( '#predefineImageRotatingText' ).attr( 'style', css );
}

如果您因任何原因无法更改该页面的HTML，您可以在window.load或document.ready上始终将span值插入其中，但在之前，您可以使用类似的东西初始化字幕

 $( '#predefineImageRotatingTextSpan' ).html( '<span id="predefineImageRotatingTextSpan"></span>' );

然后使用上述函数。

编辑：

如果一开始在div中有一些预定义的文本，只需将其值复制到该div中即可：

var $object = $( '#predefineImageRotatingTextSpan' )
var initialText = $object.text()
$object.html( '<span id="predefineImageRotatingTextSpan"> ' + initialText  + '</span>' );
相关文章：