$（window）.load和（document）.ready

Question

我在編輯一個模板，但我知道零關於JavaScript。在一個頁面上有一個滑塊，加載滑塊有一個JavaScript使用（文檔）.ready。

在模板的另一個頁面上還有另一個函數$（window）。在頁面上加載一些元素的過濾器。

我想用這兩個元素製作一個頁面：滑塊和下面的元素用按鈕來過濾它們。

我已經複製了secon頁面上的滑塊html和javascript，但我注意到2個JavaScript「互相干掉」：如果兩者都存在，則filering腳本不起作用。如果我刪除代碼以放置滑塊，則過濾功能可以很好地工作。我該如何解決這個問題？

這裏是代碼：

滑塊：

//Revolution Slider 
var tpj = jQuery; 
tpj.noConflict(); 

tpj(document).ready(function() { 

    if (tpj.fn.cssOriginal != undefined) 
     tpj.fn.css = tpj.fn.cssOriginal; 

    tpj('.fullwidthbanner').revolution(
     { 
      delay: 9000, 
      startwidth: 1920, 
      startheight: 649, 
      onHoverStop: "off",      // Stop Banner Timet at Hover on Slide on/off 
      thumbWidth: 100,       // Thumb With and Height and Amount (only if navigation Tyope set to thumb !) 
      thumbHeight: 50, 
      thumbAmount: 3, 
      hideThumbs: 0, 
      navigationType: "bullet",    // bullet, thumb, none 
      navigationArrows: "none",    // nexttobullets, solo (old name verticalcentered), none 
      navigationStyle: "round",    // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom 
      navigationHAlign: "center",    // Vertical Align top,center,bottom 
      navigationVAlign: "bottom",     // Horizontal Align left,center,right 
      navigationHOffset: 30, 
      navigationVOffset: 40, 
      soloArrowLeftHalign: "left", 
      soloArrowLeftValign: "center", 
      soloArrowLeftHOffset: 20, 
      soloArrowLeftVOffset: 0, 
      soloArrowRightHalign: "right", 
      soloArrowRightValign: "center", 
      soloArrowRightHOffset: 20, 
      soloArrowRightVOffset: 0, 
      touchenabled: "on",      // Enable Swipe Function : on/off 
      stopAtSlide: -1,       // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case. 
      stopAfterLoops: -1,      // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic 
      hideCaptionAtLimit: 0,     // It Defines if a caption should be shown under a Screen Resolution (Basod on The Width of Browser) 
      hideAllCaptionAtLilmit: 0,    // Hide all The Captions if Width of Browser is less then this value 
      hideSliderAtLimit: 0,     // Hide the whole slider, and stop also functions if Width of Browser is less than this value 
      fullWidth: "on", 
      shadow: 0        //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !) 
     }); 
}); 

過濾功能：

$(window).load(function() { 
    $(function() { 
     $.Isotope.prototype._getCenteredMasonryColumns = function() { 
      this.width = this.element.width(); 
      var parentWidth = this.element.parent().width(); 
      // i.e. options.masonry && options.masonry.columnWidth 
      var colW = this.options.masonry && this.options.masonry.columnWidth || 
      // or use the size of the first item 
      this.$filteredAtoms.outerWidth(true) || 
      // if there's no items, use size of container 
      parentWidth; 
      var cols = Math.floor(parentWidth/colW); 
      cols = Math.max(cols, 1); 
      // i.e. this.masonry.cols = .... 
      this.masonry.cols = cols; 
      // i.e. this.masonry.columnWidth = ... 
      this.masonry.columnWidth = colW; 
     }; 

     $.Isotope.prototype._masonryReset = function() { 
      // layout-specific props 
      this.masonry = {}; 
      // FIXME shouldn't have to call this again 
      this._getCenteredMasonryColumns(); 
      var i = this.masonry.cols; 
      this.masonry.colYs = []; 
      while (i--) { 
       this.masonry.colYs.push(0); 
      } 
     }; 

     $.Isotope.prototype._masonryResizeChanged = function() { 
      var prevColCount = this.masonry.cols; 
      // get updated colCount 
      this._getCenteredMasonryColumns(); 
      return (this.masonry.cols !== prevColCount); 
     }; 

     $.Isotope.prototype._masonryGetContainerSize = function() { 
      var unusedCols = 0, 
       i = this.masonry.cols; 
      // count unused columns 
      while (--i) { 
       if (this.masonry.colYs[i] !== 0) { 
        break; 
       } 
       unusedCols++; 
      } 
      return { 
       height: Math.max.apply(Math, this.masonry.colYs), 
       // fit container to columns that have been used; 
       width: (this.masonry.cols - unusedCols) * this.masonry.columnWidth 
      }; 
     }; 

     var $container = $('#container'), 
      $body = $('body'), 
      colW = 1, 
      columns = null; 

     $container.isotope({ 
      // disable window resizing 
      resizable: false, 
      masonry: { 
       columnWidth: colW 
      } 
     }); 

     //FILTERING 
     $('#filters a').click(function() { 
      var selector = $(this).attr('data-filter'); 
      $container.isotope({ 
       filter: selector 
      }); 
      return false; 
     }); 
    }); 
}); 

Answer 1

那麼，發生了什麼事是你調用的第一個文件jQuery.noConflict()。該方法使jQuery放棄對$變量的控制（將其返回到之前的值，默認爲undefined）。在你的第二個文件中，你使用的是$，當然這個文件當時還沒有定義，這就是爲什麼你的代碼不工作。

要麼刪除調用noConflict()或包裹在第二個文件中的代碼在此：

(function($) { 
    //...your code here ($(window).load() and all else) 
})(jQuery); 

這樣，$變量在代碼中被再次定義，僅內部的功能。但是，我會堅持第一個解決方案。如果您使用的是jQuery，則只有在您有很好的理由將$變量用於其他目的時才應該調用.noConflict()。請記住，當人們看到$時，他們會考慮jQuery。這幾乎是一個標準。