Jquery調用衝突，似乎無法與其他人一起工作

因此，我已閱讀其他人關於此問題的帖子，無論如何我仍然無法讓我的工作，無論如何。Jquery調用衝突，似乎無法與其他人一起工作

我基本上有一個畫廊，其中我想要替換內容的滑塊和div，此刻只有滑塊有效。以下是我在我的頭上

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script> 
<script type="text/javascript" src="js/jquery.thumbnailScroller.js"></script>

所以先上顯然是我的jQuery的呼叫，然後旁邊的是，我沒有創造卻都在網上找到的滑塊。

然後在我的網頁我有下面的代碼來調用這個了，

<div id="biocontent"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod velit nec sem iaculis vitae laoreet sem convallis. Donec sed lorem ante, quis fermentum nisl. Nullam adipiscing fermentum rhoncus. Aenean dui lectus, condimentum sed aliquet a, euismod vitae dui. Donec tempus faucibus tortor, feugiat fringilla nibh posuere eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla a elit ut quam laoreet venenatis. Proin pharetra semper interdum. Phasellus porttitor imperdiet libero. Aenean ultricies rhoncus metus eget semper. 
<br /><br /> 
Morbi rutrum ornare tortor, quis aliquam felis commodo et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed justo mauris, congue nec porttitor non, vehicula sed nisi. Praesent ultrices euismod massa, sit amet semper nisi elementum sit amet. Sed ut facilisis erat. Sed vestibulum ullamcorper magna, id euismod mauris posuere id. Aenean ac euismod mauris. Aliquam non mi ac sapien commodo adipiscing. Suspendisse nec felis a est convallis scelerisque. Mauris tempus pharetra euismod. 

    </div> 

    <div id="tS2" class="bioworkscroller"> 
     <div class="bioscollerContainer"> 
      <div class="bioscoller"> 

     <a href="testvid.html"><img src="img/thumbs/img3.jpg" /></a> 
     <a href="#"><img src="img/thumbs/img4.jpg" /></a> 
     <a href="#"><img src="img/thumbs/img5.jpg" /></a> 


      </div> 
     </div> 
<a href="#" class="bioscollerPrevButton"></a> 
<a href="#" class="bioscollerNextButton"></a> 
    </div>

，然後在下面，我有我的Ajax調用和滑塊所有的JavaScript，

(function($) { 
    $(document).ready(function(){ 
$("#links a").bind("click", function(e){ 
    e.preventDefault(); 
    var pageLocation = $(this).attr("href"); 
    $.ajax({ 
    url: pageLocation, 
    success: function(data){ 
     $("#biocontent").html(data); 
    }, 
    dataType : "html" 
    }); 
}); 
}); })(jQuery) 
jQuery.noConflict(); 
(function($){ 
window.onload=function(){ 
$("#tS1").thumbnailScroller({ 
    scrollerType:"hoverAccelerate", 
    scrollerOrientation:"horizontal", 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:800, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
}); 
$("#tS2").thumbnailScroller({ 
    scrollerType:"clickButtons", 
    scrollerOrientation:"horizontal", 
    scrollSpeed:2, 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:600, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
}); 
$("#tS3").thumbnailScroller({ 
    scrollerType:"hoverPrecise", 
    scrollerOrientation:"vertical", 
    scrollSpeed:2, 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:800, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
}); 
} 
})(jQuery);

我有ajax開關在沒有滑塊的情況下在自己的文件中工作，但無法讓它們都工作，我覺得這與'jQuery.noConflict（）'調用有關，但無法弄清楚如何解決這個問題，當我在javascript控制檯中運行它不會出現錯誤。

任何幫助，將不勝感激

來源

2011-10-26 Chris James Champeau

由於$（document）.ready是一個好得多包裝window.onload刪除此幷包裝在一個doc.ready中。

(function($) { 
$(document).ready(function(){ 
     $("#links a").bind("click", function(e){ 
     e.preventDefault(); 
     var pageLocation = $(this).attr("href"); 
     $.ajax({ 
       url: pageLocation, 
       success: function(data){ 
       $("#biocontent").html(data); 
      }, 
      dataType : "html" 
     }); 
    }); 

    $("#tS1").thumbnailScroller({ 
     scrollerType:"hoverAccelerate", 
     scrollerOrientation:"horizontal", 
     scrollEasing:"easeOutCirc", 
     scrollEasingAmount:800, 
     acceleration:4, 
     scrollSpeed:800, 
     noScrollCenterSpace:10, 
     autoScrolling:0, 
     autoScrollingSpeed:2000, 
     autoScrollingEasing:"easeInOutQuad", 
     autoScrollingDelay:500 
    }); 

    $("#tS2").thumbnailScroller({ 
     scrollerType:"clickButtons", 
     scrollerOrientation:"horizontal", 
     scrollSpeed:2, 
     scrollEasing:"easeOutCirc", 
     scrollEasingAmount:600, 
     acceleration:4, 
     scrollSpeed:800, 
     noScrollCenterSpace:10, 
     autoScrolling:0, 
     autoScrollingSpeed:2000, 
     autoScrollingEasing:"easeInOutQuad", 
     autoScrollingDelay:500 
    }); 
    $("#tS3").thumbnailScroller({ 
     scrollerType:"hoverPrecise", 
     scrollerOrientation:"vertical", 
     scrollSpeed:2, 
     scrollEasing:"easeOutCirc", 
     scrollEasingAmount:800, 
     acceleration:4, 
     scrollSpeed:800, 
     noScrollCenterSpace:10, 
     autoScrolling:0, 
     autoScrollingSpeed:2000, 
     autoScrollingEasing:"easeInOutQuad", 
     autoScrollingDelay:500 
    }); 


}); 
})(jQuery)

我沒有看到一個理由使用jQuery.noConflict（），或者是你使用在你的頁面的任何非jQuery的腳本？

來源

2011-10-26 20:38:42 FloydThreepwood

我沒有看到自執行的jQ包裝器的需求;儘管如此，我很樂意錯誤地學習它的推理。 –

這實際上被認爲是最佳實踐，因爲您將所有內容都包含在自己的名稱空間中。一個很好的描述可以在這裏找到（http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth）。 – FloydThreepwood

感謝您的鏈接，@FloydThreepwood - 我一直在使用對象文字來命名空間，但實際上並沒有考慮使用匿名函數對jQuery進行作用域。希望我能夠理解並改進我的做法。 –

不知道，如果你正確地調用滾動，仍有一些問題纔去更深入的解決：

我可能是錯的，但我不認爲你需要自動執行的jQuery包裝（模塊模式？）[更新：你不需要它，但根據弗洛伊德的迴應，它可能是一個你想使用的最佳實踐模式]
你不應該需要noConflict，因爲你只在頁面上有jQuery，沒有其他框架
您有一個window.onload調用。但是這是（某種）文件已經準備好的。爲了更準確，有一個區別（jQuery也可以做窗口準備），但出於你的目的，你不應該需要它。準備好的文件不僅夠用而且更好。

據我所看到的，這是你打算怎麼做：

$(document).ready(function(){ // or shorthand version thereof 

    $("#links a").bind("click", function(e){ 
    e.preventDefault(); 
    var pageLocation = $(this).attr("href"); 
    $.ajax({ 
     url: pageLocation, 
     success: function(data){ 
     $("#biocontent").html(data); 
     }, 
     dataType : "html" 
    }); 
    }); 

    $("#tS1").thumbnailScroller({ 
    scrollerType:"hoverAccelerate", 
    scrollerOrientation:"horizontal", 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:800, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
    }); 

    $("#tS2").thumbnailScroller({ 
    scrollerType:"clickButtons", 
    scrollerOrientation:"horizontal", 
    scrollSpeed:2, 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:600, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
    }); 

    $("#tS3").thumbnailScroller({ 
    scrollerType:"hoverPrecise", 
    scrollerOrientation:"vertical", 
    scrollSpeed:2, 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:800, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
    }); 
});

在一個側面說明：你可以通過地圖常見的參數到每個大大減少重複你的thumbnailScroller（）調用。如果滾動條可能有不同的行爲，則可以使用.extend將地圖（基本和擴展）連接在一起。

來源

2011-10-26 20:35:33

你在哪裏看到_1._？它不是模塊模式嗎？ – FloydThreepwood

畢竟，你可能是對的。我的錯;將編輯。 –

試試這個：

$(function() { 

    $("#links a").bind("click", function(e) { 
     e.preventDefault(); 
     var pageLocation = $(this).attr("href"); 
     $.ajax({ 
      url: pageLocation, 
      success: function(data) { 
       $("#biocontent").html(data); 
      }, 
      dataType: "html" 
     }); 
    }); 


    $("#tS1").thumbnailScroller({ 
     scrollerType: "hoverAccelerate", 
     scrollerOrientation: "horizontal", 
     scrollEasing: "easeOutCirc", 
     scrollEasingAmount: 800, 
     acceleration: 4, 
     scrollSpeed: 800, 
     noScrollCenterSpace: 10, 
     autoScrolling: 0, 
     autoScrollingSpeed: 2000, 
     autoScrollingEasing: "easeInOutQuad", 
     autoScrollingDelay: 500 
    }); 
    $("#tS2").thumbnailScroller({ 
     scrollerType: "clickButtons", 
     scrollerOrientation: "horizontal", 
     scrollSpeed: 2, 
     scrollEasing: "easeOutCirc", 
     scrollEasingAmount: 600, 
     acceleration: 4, 
     scrollSpeed: 800, 
     noScrollCenterSpace: 10, 
     autoScrolling: 0, 
     autoScrollingSpeed: 2000, 
     autoScrollingEasing: "easeInOutQuad", 
     autoScrollingDelay: 500 
    }); 
    $("#tS3").thumbnailScroller({ 
     scrollerType: "hoverPrecise", 
     scrollerOrientation: "vertical", 
     scrollSpeed: 2, 
     scrollEasing: "easeOutCirc", 
     scrollEasingAmount: 800, 
     acceleration: 4, 
     scrollSpeed: 800, 
     noScrollCenterSpace: 10, 
     autoScrolling: 0, 
     autoScrollingSpeed: 2000, 
     autoScrollingEasing: "easeInOutQuad", 
     autoScrollingDelay: 500 
    }); 

});

來源

2011-10-26 20:39:32 AlienWebguy

Jquery調用衝突，似乎無法與其他人一起工作

回答

相關問題