如何在Javascript中選擇多個不是ID的類

我需要在Javascript中選擇多個類，並使其適用於懸停時的滑動效果。這些元素應該在<span>標記中。如何在Javascript中選擇多個不是ID的類

第一要素是工作：

<p id="tweet1">First long text displayed fully on hover</p>

第二個元素，第三個元素，等不工作：

<span class="tweet1">Second long text displayed fully on hover</span> 

<span class="tweet1">Third long text displayed fully on hover</span>

的JavaScript：

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

var slide_timer, 
    max = tweet.scrollWidth, 
    slide = function() { 
     tweet.scrollLeft += 2; 
     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; 
    } 
};

CSS：

#tweet1 { 
    overflow:hidden; 
    white-space:nowrap; 
    width:120px; 
} 
.hiding { 
    text-overflow:ellipsis; 
}

上的jsfiddle全碼：http://jsfiddle.net/27uuj/3/

來源

2013-12-12 kostya572

你需要它來使用gelElementsByClassName（）。因此，對您的代碼的更改將爲：

<p class="tweet1">First long text displayed fully on hover</p> 

var tweet = document.gelElementsByClassName('tweet1');

來源

2013-12-12 23:59:09

我做到了，但懸停效果完全停止工作。 – kostya572

當我編輯tweet.id ='tweet1'; to tweet.Classname它與tweet.className ='隱藏'衝突;我不知道該怎麼辦 – kostya572

我沒有告訴你修改tweet.id。我的答案顯示了需要更改的兩行。 –

這是因爲document.getElementById('tweet1');它的「身份證」，而不是得到一個元素的一類。（這是以這種方式命名的原因。）您可能需要getElementsByClassName()。

來源

2013-12-12 23:55:45

我做到了，但懸停效果完全停止工作。當我編輯tweet.id ='tweet1'; to tweet.Classname它與tweet.className ='隱藏'衝突;我不知道該怎麼辦。 – kostya572

如何在Javascript中選擇多個不是ID的類

回答

相關問題