자바 스크립트에서 여러 클래스를 선택하는 방법

Question

자바 스크립트에서 여러 클래스를 선택하고 마우스로 슬라이드 효과를 적용해야합니다. 요소는 <span> 태그에 있어야합니다.

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

자바 스크립트 :

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에

전체 코드 : document.getElementById('tweet1');는 클래스의 "ID"를하지 않음으로써 요소를 얻을 수 있기 때문이다 http://jsfiddle.net/27uuj/3/

Answer 1

gelElementsByClassName()을 사용해야합니다. 코드 변경 내용은 다음과 같습니다.

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

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

Answer 2

. (이름이 그런 식으로 된 이유가 있습니다.) 아마도 getElementsByClassName()을 원할 것입니다.