jQuery麻煩與AJAX

Question

我有一個問題，我想建立一個Ajax的一頁，但我有2個不同的JS文件，因爲當我有我的代碼在1文件它不工作。

我怎麼能結合這些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"); 
     } 
    }); 
}); 

我怎麼能結合它規定？謝謝！

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變量與第一個文件衝突。嘗試添加範圍到你的第二個文件（在你的第一個文件中，你也有範圍，但不是完整的文件）;範圍界定將改變你的變量的範圍，並且不會再有衝突。

(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);