javascript - 给出错误的Jquery冲突

Question

从事具有多种功能的项目，例如，

• 谷歌翻译
• Image Slider [galleriffic 使用]
• 弹出窗口[使用阴影框]
• JavaScript 水平菜单栏*

现在我们在其中遇到 jquery 冲突和错误消息，例如

我知道当代码找不到 jquery 文件但文件存在时会出现此类消息。

这里是项目中使用的文件列表这是谷歌翻译需要的

    1.<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    2. <script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
    3. <script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"></script>
    4.  <script type="text/javascript" src="/scripts/jquery.bt.js"></script>
    5. <script type="text/javascript" src="/scripts/jquery-ui-1.8.21.custom.min.js"></script>
    6. <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
    7. <script type="text/javascript" src="/scripts/common.js"></script>

这个是 slider

    1.  <script type="text/javascript" src="/SliderBox/js/jquery-1.3.2.js"></script>
    2.  <script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"></script>
    3.  <script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"></script>

这是弹出窗口

    1. <script type="text/javascript" src="/SliderBox/js/prototype.js"></script>
    2. <script type="text/javascript" src="/SliderBox/js/effects.js"></script>
    3. <script type="text/javascript" src="/SliderBox/js/lightwindow.js"></script>
    4. <script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"></script>

水平菜单需要这个

    1. <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    2. <script src="../scripts/jquery.als-1.1.min.js" type="text/javascript"></script>
    3. <script src="../scripts/settingsEN.js" type="text/javascript"></script>

我已经优化了所有这些并且只包含了一个 jquery-1.9.1.min.js 的 jquery 文件但仍然无法清除冲突这是我使用的顺序

    1. <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    2.<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    3. <script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
    4. <script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"></script>
    5.  <script type="text/javascript" src="/scripts/jquery.bt.js"></script>
    6. <script type="text/javascript" src="/scripts/jquery-ui-1.8.21.custom.min.js"></script>
    7. <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
    8. <script type="text/javascript" src="/scripts/common.js"></script>
    9. <script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"></script>
    10.  <script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"></script>
    11.<script type="text/javascript" src="/SliderBox/js/prototype.js"></script>
    12. <script type="text/javascript" src="/SliderBox/js/effects.js"></script>
    13. <script type="text/javascript" src="/SliderBox/js/lightwindow.js"></script>
    14. <script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"></script>
    15.<script src="../scripts/jquery.als-1.1.min.js" type="text/javascript"></script>
    16. <script src="../scripts/settingsEN.js" type="text/javascript"></script>

这些我都试过了

http://api.jquery.com/jQuery.noConflict/

http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DUsing_jQuery_with_Other_Libraries%26redirect%3Dno

http://www.w3schools.com/jquery/jquery_noconflict.asp

这些我都试过了

 <script type="text/javascript" src="other_lib.js"></script>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
 $.noConflict();
 // Code that uses other library's $ can follow here.
 </script>

或

 <script type="text/javascript" src="other_lib.js"></script>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
 $.noConflict();
 jQuery(document).ready(function($) {
 // Code that uses jQuery's $ can follow here.
  });
 // Code that uses other library's $ can follow here.
 </script>

或

jQuery.noConflict();
(function($) {
 $(function() {
  // more code using $ as alias to jQuery
 });
})(jQuery);
// other code using $ as an alias to the other library

但仍然无法得到解决方案

当我删除 slider 的这段代码时，一切正常，没有错误，但 slider 不起作用

 <!--script for slider--->

      <script type="text/javascript">

  jQuery(document).ready(function($) {
    // We only want these styles applied when javascript is enabled
    $('div.navigation').css({'width' : '', 'float' : 'right'});
    $('div.content').css('display', 'block');

    // Initially set opacity on thumbs and add
    // additional styling for hover effect on thumbs
    var onMouseOutOpacity = 0.67;
    $('#thumbs ul.thumbs li').opacityrollover({
      mouseOutOpacity:   onMouseOutOpacity,
      mouseOverOpacity:  1.0,
      fadeSpeed:         'fast',
      exemptionSelector: '.selected'
    });

    // Initialize Advanced Galleriffic Gallery
    var gallery = $('#thumbs').galleriffic({
      delay:                     2500,
      numThumbs:                 15,
      preloadAhead:              10,
      enableTopPager:            true,
      enableBottomPager:         true,
      maxPagesToShow:            7,
      imageContainerSel:         '#slideshow',
      controlsContainerSel:      '#controls',
      captionContainerSel:       '#caption',
      loadingContainerSel:       '#loading',
      renderSSControls:          true,
      renderNavControls:         true,
      random:                    true,
      prevLinkText:              '',
      nextLinkText:              '',
      nextPageLinkText:          '',
      playLinkText:              '',
      pauseLinkText:             '',
      prevPageLinkText:          '',
      enableHistory:             false,
      autoStart:                 false,
      syncTransitions:           true,
      defaultTransitionDuration: 900,
      onSlideChange:             function(prevIndex, nextIndex) {
        // 'this' refers to the gallery, which is an extension of $('#thumbs')
        this.find('ul.thumbs').children()
          .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
          .eq(nextIndex).fadeTo('fast', 1.0);
      },
      onPageTransitionOut:       function(callback) {
        this.fadeTo('fast', 0.0, callback);
      },
      onPageTransitionIn:        function() {
        this.fadeTo('fast', 1.0);
      }
    });
  });
</script>



  <!--script end--->

有人可以帮忙吗？

Answer 1

我阅读了您的问题并在网站上搜索了您使用的每个插件。

• Any List Scroller
• Shadowbox.js
• Prototype
• Galleriffic

如果有插件缺失，请发布。

我有类似的问题，但我没有使用 $.noConflict(true);

如果您的项目是服务器，当它打开时获取文件 html。

我建议你在一个html文件中插入对外部div的调用。

并且在每个文件 html 中你可以用

编写脚本

 $(document).ready(function () {
   .............
    });

您不能在每个 html 文件中调用外部文件，因为这会产生正常的冲突。

和..

我建议这个网站看看最后的图书馆... Google-libraries-last

和..

I have optimized all these and have included only one jquery file of jquery-1.9.1.min.js but still not able to clear the conflict Here is the sequence used by me

这样更好。

AND:::

对于错误TypeError: $ is not a function 取决于这个函数是如何实现或编写的。可能的错误是 ; 或 {, } , ( , )发生这种情况是因为加载了另一个 javascript 库并覆盖了 jQuery 的对象 $() 快捷方式。因此，当我们包含除 jquery 之外的其他 javascript 库时，我们会将 jquery 库暴露给冲突。许多 JavaScript 库使用 $ 作为函数名或变量名，就像 jQuery 一样。在 jQuery 的例子中，$ 只是 jQuery 的一个别名，因此所有功能都可以在不使用 $ 的情况下使用。如果我们需要在 jQuery 旁边使用另一个 JavaScript 库，一个解决方案是，我们可以通过调用 $.noConflict() 将 $ 的控制权返回给另一个库，例如:

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ follow here.
  });
  // Code that uses other library's $ follow here.
</script>

另一种解决方案是将 jquery 对象 $() 重新分配回 jquery 库，将我们的调用包装在一个重新分配 $() 对象的函数中。因此，我们确保我们的代码不会与 Prototype、Scriptaculous 等混淆。

( function($) {
 // Your jquery code
} ) ( jQuery );

假设:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>

<script type="text/javascript">
( function($) {
    // Assigning $ again to jquery
    $(document).ready( function() { alert("Now you can use to use '$' in your jquery code");  } );
} ) ( jQuery );

//this will fail
$(document).ready( function() { alert('This fails because $ has been modified outside jquery'); } );
</script>

这种方式是自调用匿名函数风格，避免与jQuery冲突。如果不使用它，则必须键入 jQuery() 而不是其对象 $()。示例:

$(document) //won't work
jquery(document) //will work

关于 JSFIDDLE.NET 的示例

最后

Typeerror for null

看jquery-documentready-controlid-is-null