.addClass()가 JS Fiddle 외부에서 작동하지 않습니다.

뷰포트에있는 .column 클래스의 모든 인스턴스에 클래스를 추가하려고합니다. .addClass()가 JS Fiddle 외부에서 작동하지 않습니다.

뷰포트의 모든 .column에 클래스 .swoosh을 추가 할 수 있지만 내 마크 업 똑같은 JS를 사용하는 경우는 뷰포트에서 .column에 .swoosh 클래스를 추가하지 않습니다.

jquery가로드되고 있는지 확인했습니다. 그것은, this page에서 뷰포트에서 .column 클래스 .swoosh을 받고되지 않습니다 JS 바이올린

에 그러나 어떤 이유로 작동하기 때문에

코드는 유효합니다.

function isElementInViewport(el) { 
var rect = el.getBoundingClientRect(); 

return (
    rect.top >= 0 && 
    rect.left >= 0 && 
    rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) && 
    rect.right <= (window.innerWidth || document. documentElement.clientWidth) 
    ); 
} 

$.fn.checkViewportAndSetClass = function() { 
    $(this).each(function(){ 
    if (isElementInViewport(this)) { 
     $(this).addClass("swoosh"); 
    } 
    }); 
}; 
$('.column').checkViewportAndSetClass(); 

$(window).on("scroll", function() { 
    $('.column').checkViewportAndSetClass(); 
});

출처

2013-07-07 Django Johnson

페이지에 jQuery가 포함되어 있지 않습니다. 콘솔에서 : Uncaught ReferenceError : $가 정의되지 않았습니다. ' 당신은 당신의 <head>에 다음을 추가하여 구글의 CDN 사본에 연결할 수 있습니다

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

출처

2013-07-07 20:18:22 mcbex

$ (document).이 경우에는 이벤트가 윈도우에 바인딩되어 있기 때문에 .ready()가 필요하지 않습니다. – mcbex

뷰포트의 모든 .column 인스턴스는 여전히'.swoosh' 클래스를 얻지 못합니다. 내 라이브 페이지 링크를 확인하고 jQuery를 추가하면로드됩니다. –

방금 다시 보았고 요소에 swoosh 클래스가 있습니다. – mcbex

당신은 라이브 페이지에 jQuery 라이브러리를로드되지 않습니다 여기

내가 실행하려고하고있는 코드입니다. 또한 코드를 한 줄에 묶어야합니다.

$(document).ready(function() { 

})

출처

2013-07-07 20:14:10 sberry

을 지금, 나는 jQuery를 로딩하고,하지만 여전히 작동하지 않습니다. 라이브 페이지를 다시 확인하십시오. –

.addClass()가 JS Fiddle 외부에서 작동하지 않습니다.

답변

관련 문제