아약스와 jQuery 문제

Question

내가 아약스 한 페이지를 구축하고 싶지만 내가 1 파일에 내 코드가 작동하지 않기 때문에 나는 2 개의 다른 js 파일이 있습니다.

내가 어떻게 그것을 하나의 .js에서 문제가이 하나 개의 느릅 나무와

(function($) { 

    $.fn.visible = function(partial) { 

     var $t   = $(this), 
      $w   = $(window), 
      viewTop  = $w.scrollTop(), 
      viewBottom = viewTop + $w.height(), 
      _top   = $t.offset().top, 
      _bottom  = _top + $t.height(), 
      compareTop = partial === true ? _bottom : _top, 
      compareBottom = partial === true ? _top : _bottom; 

     return ((compareBottom <= viewBottom) && (compareTop >= viewTop)); 

    }; 

})(jQuery); 

var win = $(window); 
var allMods = $(".module"); 

// Already visible modules 
allMods.each(function(i, el) { 
    var el = $(el); 
    if (el.visible(true)) { 
     el.addClass("already-visible"); 
    } 
}); 

win.scroll(function(event) { 

    allMods.each(function(i, el) { 
     var el = $(el); 
     if (el.visible(true)) { 
      el.addClass("come-in"); 
     } 
    }); 

}); 

이

var win = $(window); 
var allMods = $(".var"); 

// Already visible modules 
allMods.each(function(i, el) { 
    var el = $(el); 
    if (el.visible(true)) { 
     el.addClass("already-visible"); 
    } 
}); 

win.scroll(function(event) { 

    allMods.each(function(i, el) { 
     var el = $(el); 
     if (el.visible(true)) { 
      el.addClass("come-in-var"); 
     } 
    }); 
}); 

내가 그것을 어떻게 결합 할 수 있습니다 다른 페이지에 지정된 파일을하지 않는이 JS를 결합 할 수 있습니다? 감사!

Answer 1

변수 allMods이 문제의 원인입니다. 이후 그것은 두 개의 다른 선택자를 가리 키므로. 아래 코드를 시도하십시오.

클래스에 기초하여 module/var addClass come-in/come-in-var 중 하나를 기반으로합니다.

var allMods = $(".module, .var"); 
win.scroll(function(event) { 
    allMods.each(function(i, el) { 
     var el = $(el); 
     if (el.visible(true)) { 
      el.addClass(el.hasClass('module') ? "come-in" : "come-in-var"); 
     } 
    }); 
}); 

Answer 2

allMods 변수가 첫 번째 파일과 충돌합니다. 두 번째 파일에 범위를 추가해보십시오 (첫 번째 파일에는 범위가 있지만 전체 파일은 아닙니다). 범위 지정은 변수의 범위를 변경하며 allMods은 더 이상 충돌하지 않습니다.

(function($) { // Scoped 
var win = $(window); 
var allMods = $(".var"); 

// Already visible modules 
allMods.each(function(i, el) { 
    var el = $(el); 
    if (el.visible(true)) { 
     el.addClass("already-visible"); 
    } 
}); 

win.scroll(function(event) { 

    allMods.each(function(i, el) { 
     var el = $(el); 
     if (el.visible(true)) { 
      el.addClass("come-in-var"); 
     } 
    }); 
}); 
})(jQuery);