如何在JavaScript中將ID更改爲類

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

我t是文本大於容器溢出時隱藏的文字效果。當鼠標懸停在文本上時，它被鎖定

此效果適用於第一個容器，但不適用於第二個容器。

我有一種感覺，因爲它使用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'); 
} 

...