둘 이상의 div에서 작동하는 함수를 리팩토링하는 방법은 무엇입니까?

화면의 20 % 이상일 때 내 div가 움직이기를 바랍니다. 누구든지 refactor 엄마 함수 "isElementOverflowing()"여러 div (예 : 3) 작동하는지 알고 있습니까? 나는 "getElementById"와 "querySelectorAll"을 사용하여 div를 얻었지만 내 함수에서는 작동하지 않습니다.둘 이상의 div에서 작동하는 함수를 리팩토링하는 방법은 무엇입니까?

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 

<div id="s1" style="width:20%; font-size:2000%" class="class">something1</div> 
<div id="s2" style="width:20%; font-size:2000%" class="class">something2</div> 
<div id="s3" style="width:20%; font-size:2000%" class="class">something3</div> 

<script type="text/javascript"> 

function isElementOverflowing(element) { 
var overflowX = element.offsetWidth < element.scrollWidth, 
overflowY = element.offsetHeight < element.scrollHeight; 

return (overflowX || overflowY); 
} 

function wrapContentsInMarquee(element) { 
var marquee = document.createElement('marquee'), 
contents = element.innerText; 

marquee.innerText = contents; 
marquee.behavior = "alternate"; 
element.innerHTML = ''; 
element.appendChild(marquee); 
} 

var element = document.getElementsByClassName("class"); 

if (isElementOverflowing(element)) { 
wrapContentsInMarquee(element); 
} 
</script> 
</body> 
</html>

출처

2017-02-21 wymyszony

도움을

감사합니다 :) 당신은 그들 각각의 이상 루프는 내가 추측 할 수 있습니다

function isElementOverflowing(element) { 
 
    var overflowX = element.offsetWidth < element.scrollWidth, 
 
    overflowY = element.offsetHeight < element.scrollHeight; 
 

 
    return (overflowX || overflowY); 
 
} 
 

 
function wrapContentsInMarquee(element) { 
 
    var marquee = document.createElement('marquee'), 
 
    contents = element.innerText; 
 

 
    marquee.innerText = contents; 
 
    marquee.behavior = "alternate"; 
 
    element.innerHTML = ''; 
 
    element.appendChild(marquee); 
 
} 
 

 
var elements = document.getElementsByClassName("class"); 
 

 
for (var i = 0; i < elements.length; i++) { 
 
    if (isElementOverflowing(elements[i])) { 
 
    wrapContentsInMarquee(elements[i]); 
 
    } 
 
}

<div id="s1" style="width:20%; font-size:2000%" class="class">something1</div> 
 
<div id="s2" style="width:20%; font-size:2000%" class="class">something2</div> 
 
<div id="s3" style="width:20%; font-size:2000%" class="class">something3</div>

는

출처

2017-02-21 20:02:53 AVAVT

고마워요. 그것은 나를 위해 작동 :) – wymyszony

getElementsByClassName는 모든 자식의 배열과 같은 객체를 반환 모든 주어진 클래스 이름을 가진 요소. 더 많은 정보 here.
따라서 함수 isElementOverflowing에서 배열이 아닌 dom 요소가 나타납니다. 그런 다음 해당 요소 만 반복하면됩니다.

elements.forEach(function(element) { 
    if (isElementOverflowing(element)) { 
    wrapContentsInMarquee(element); 
    } 
});

출처

2017-02-21 20:04:41

둘 이상의 div에서 작동하는 함수를 리팩토링하는 방법은 무엇입니까?

답변

관련 문제