Question

我对JavaScript不熟悉，而且我一直试图解决这个问题几天，而我似乎无法让它发挥作用。

我有这个JSFiddle http://jsfiddle.net/xslibx/nG4Zz/

HTML

<h4 id="tweet" >Some text here</h4>
<h4 id="tweet" >Some more text here</h4>

CSS

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

的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;
    }
};

当文本大于隐藏溢出的容器时，这是一种骂人文本效果。当鼠标悬停在文本上时，它会被撤销

此效果适用于第一个容器，但不适用于第二个容器。

我有一种感觉，因为它使用ID（#tweet，＃tweet_js）而不是CLASS（.tweet，.tweet_js）。我如何更改JavaScript代码，使其适用于类而不是ID

<h4 class="tweet" >Some text here</h4>
<h4 class="tweet" >Some more text here</h4>

提前谢谢

Answer 1

您对导致问题的重复ID感到满意。 ID应该是唯一的。将一个具有相同ID的元素添加到文档后，所有投注都将关闭。

要更改代码，请在标记中使用class="whatever"，然后使用document.getElementsByClassName("whatever")访问匹配元素数组。

<强> HTML：

<h4 class="tweet" >Some text here</h4>
<h4 class="tweet" >Some more text here</h4>

<强> JS：

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

// Apply the hidden class to all tweets
for(var i = 0; i < tweets.length; i++) {
    tweets[i].classlist.add('hidden');
}

...

如何在JavaScript中将ID更改为类

1 个答案: