将为ID编码的JS效果更改为类

时间:2014-04-08 02:14:42

标签: javascript

我试图向我们展示我在JSFiddle上发现的滚动文字JavaScript http://jsfiddle.net/sdleihssirhc/AYYQe/3/

我没有使用JavaScript,只是开始学习jQuery。

代码使用ID

HTML

<p id="tweet">These English psychologists, to whom...</p>

CSS

#tweet, #tweet_js { border:1px solid red; width:25em; padding:.5em; }
#tweet_js { overflow:hidden; white-space:nowrap; }
.hiding { text-overflow:ellipsis; }

我需要#tweet成为一个类,所以我可以在同一页面上多次使用它。

JavaScript似乎正在使用ID #tweet并创建另一个ID #tweet_js

的JavaScript

var tweet = document.getElementById('tweet');
tweet.id = 'tweet_js';
tweet.className = 'hiding';

var slide_timer,
max = tweet.scrollWidth,
slide = function () {
    tweet.scrollLeft += 1;
    if (tweet.scrollLeft < max) {
        slide_timer = setTimeout(slide, 40);
    }
};

tweet.onmouseover = tweet.onmouseout = function (e) {
e = e || window.event;
e = e.type === 'mouseover';
clearTimeout(slide_timer);
tweet.className = e ? '' : 'hiding';
if (e) {
    slide();
} else {
    tweet.scrollLeft = 0;
}
};

有人可以告诉我如何更改JavaScript,以便此效果可以使用类(.tweet)而不是ID(#tweet)。非常感谢!

1 个答案:

答案 0 :(得分:0)

第一行尝试更改为

var tweet =  document.getElementsByClassName('tweet');

确保你有一个名为tweet的类用于问题的html元素..

<p id="tweet" class="tweet">These English psychologists, to whom...</p>

不确定这是否有效。祝你好运