여러 div에 하나의 간격을 설정할 수 있습니까?

Question

하나의 DIV에 대한 예가 있습니다. 하지만 지금은 박쥐가 더 필요합니다. 어떻게하면 모든 박쥐에 대해 1 setInterval = getElementsByClassName ("bat")을 만들 수 있습니까?

var bat = document.getElementByID("bat"); 
function batAnimation(bat) { 
    var frame = Math.floor(Math.random() * 4) + 1; 
    switch (frame) { 
    case 1: 
     bat.style.backgroundPositionX=0; 
     break; 
    case 2: 
     bat.style.backgroundPositionX=10; 
     break; 
    case 3: 
     bat.style.backgroundPositionX=20; 
     break; 
    case 4: 
     bat.style.backgroundPositionX=30; 
     break; 
    } 
} 
setInterval(batAnimation, 50); 

Answer 1

이 시도 :

var bats = document.getElementsByClassName("bat"); 
    function batAnimation(bat) { 
     var frame = Math.floor(Math.random() * 4) + 1; 
     for(var i=0; i< bats.length;i++){ 
     bats[i].style.backgroundPositionX=(frame-1)*10; 
     } 
    } 
    setInterval(batAnimation, 50); 

설명 : 여기 박쥐는 모든 DIV 요소의 배열입니다, 나는 그것이 for 루프를 사용하고 각각에 backgroundPositionX를 할당 통과하고있다.

getElementsByClassName 모든 브라우저의 경우 작동하지 않기 때문에 jQuery를이 옵션 사용을 사용할 수 없습니다

if(!document.getElementsByClassName){ 
document.getElementsByClassName(clasName){ 
    var parent = document; 
    var elements = parent.getElementsByTagName('*'); 
    var matching = []; 
    for(var i = 0, elementsLength = elements.length; i < elementsLength; i++){ 
    if ((' ' + elements[i].className + ' ').indexOf(findClass) > -1) { 
     matching.push(elements[i]); 
    } 
    } 
    return matching; 
} 
}