两个脚本之间可能存在冲突答案

【问题标题】：Possible conflict between two scripts两个脚本之间可能存在冲突
【发布时间】：2012-07-28 01:05:04
【问题描述】：

我有这个随机显示/隐藏 div 的脚本。但是由于某种原因，加载页面时它没有显示任何内容：

$(document).ready(function() {
      $('.control').on('click', function(e) {
          e.preventDefault();
          var field = $(this).data('field');
          $('.hider:visible').fadeOut("slow", function() {
              $('#' + field + '-gallery, #' + field + '-tag').fadeIn("slow");
          });
      });

      var randomIndex = Math.floor((Math.random() * 100) + 1) % 5;
      console.log(randomIndex);

      var field = $($('a').get(randomIndex)).data('field');
      $('#' + field + '-gallery, #' + field + '-tag').fadeIn("slow");
  });

我有这个（在页脚中）：

/* jQuery.noConflict() for using the plugin along with other libraries. 
           You can remove it if you won't use other libraries (e.g. prototype, scriptaculous etc.) or 
           if you include jQuery before other libraries in yourdocument's head tag. 
           [more info: http://docs.jquery.com/Using_jQuery_with_Other_Libraries] */
        //jQuery.noConflict(); 
        /* calling thumbnailScroller function with options as parameters */
        (function($){
        window.onload=function(){ 
            $("#tS2").thumbnailScroller({ 
                    scrollerType:"clickButtons", 
                    scrollerOrientation:"horizontal", 
                    scrollSpeed:2, 
                    scrollEasing:"easeOutCirc", 
                    scrollEasingAmount:600, 
                    acceleration:10, 
                    scrollSpeed:900, 
                    noScrollCenterSpace:10, 
                    autoScrolling:0, 
                    autoScrollingSpeed:2000, 
                    autoScrollingEasing:"easeInOutQuad", 
                    autoScrollingDelay:500 

            });
        }
        })(jQuery);

我注意到，如果我在页脚的脚本中启用 jQuery.noConflict，我会在顶部脚本的检查器中收到错误：

$(document).ready(function() {
      $('.control').on('click', function(e) {
Uncaught TypeError: Property '$' of object [object Window] is not a function
          e.preventDefault();

但如果我在页脚脚本中禁用 noConflict，则没有错误，但顶部脚本仍然不起作用。我是否需要在顶部脚本中添加另一个 noConflict，或者我在 $(document).ready 中将其称为错误？

【问题讨论】：

您是否在加载其他 DOM 库以及 jQuery？如果是这样，为什么？无论如何，如果是这样，您可以保留noConflict()，并将您的第一行更改为：jQuery(document).ready(function($) {。注意 $ 作为函数参数。
@am 不是我，我确实有一个 jqueryUI 库，它在顶部脚本之前被调用。 JqueryUI 库用于滑块库，这是在页脚脚本中调用的内容。顶部（或标题，因为它在标题中）脚本是这样的，它将显示/隐藏 div 在页面加载时随机包含滑块库的位置。当我查看检查器时，我在控制台中看到正在提取一个数字，然后返回到顶部脚本，它是 console.log(randomIndex) 但是当页面刷新时，浏览器的页面上没有显示任何内容。
这是我试图以一种非常精简的方式完成的工作：jsfiddle.net/TRQFa/7 但是“画廊”这个词应该在哪里，滑块画廊将用于每个项目。
我之前遇到过很多次这个问题。奇怪的是，noConflict 总是给我造成冲突。作为一般经验法则，如果我正在编写一个供我自己使用的插件，我会避免使用可能被库采用的名称，这样我就可以避免 noConflict。

标签： javascript jquery

【解决方案1】：

您也可以使用jQuery 代替$。并将$ 留给其他图书馆。这样您就不会遇到冲突问题。

像这样试试。

jQuery(document).ready(function() {
      jQuery('.control').on('click', function(e) {
          e.preventDefault();

【讨论】：