jQuery - noConflict()问题

Question

我有一个问题可能与我试图这样做的范围.

滑块可以工作.或者图像将替换文本.但不是两个.

我必须链接这个"scrollbox.min.js"文件才能使滑块工作.因此我使用noConflict.

我希望下面的代码片段使用scrollbox.min.js文件:

<script>
  jQuery().noConflict();
  jQuery(function($) {
        $(document).ready(function() {
          jQuery('#scrool').scrollbox({
            direction: 'h',
            switchItems: 3,
            distance: 540,
            autoPlay: false
          });
          jQuery('#scrool-backward').click(function() {
            jQuery('#scrool').trigger('backward');
          });
          jQuery('#scrool-forward').click(function() {
            jQuery('#scrool').trigger('forward');
          });
        })
      }
</script>

我希望其余的人使用该网站的jQuery.

我注意到的东西:

取决于我放置jQuery()的位置.noConflict(); 它允许执行不同的代码段.我需要两个工作:

请参阅下面的脚本的完整部分:

<script src="http://www.qwerty.com/assets/xjs/jquery.scrollbox.min.js"></script>
<script>
  jQuery().noConflict();
  jQuery(function($) {
    $(document).ready(function() {
      jQuery('#scrool').scrollbox({
        direction: 'h',
        switchItems: 3,
        distance: 540,
        autoPlay: false
      });
      jQuery('#scrool-backward').click(function() {
        jQuery('#scrool').trigger('backward');
      });
      jQuery('#scrool-forward').click(function() {
        jQuery('#scrool').trigger('forward');
      });
    });
  });

</script>

<script>
  jQuery(function($) {
    $(document).ready(function() {

      jQuery('.starIMGrating').each(function(i, obj) {

        var myString = jQuery(this).html()

        if (myString > "5") {
          var myString = "5"
        } else {}

        /* alert(myString); */
        myRegexp3 = /\d/;
        var match = myRegexp3.exec(myString);

        var myRegexp2 = /\d\.(\d)/;
        var matchstring = myString;
        var m;

        if (myString.indexOf(".") == -1) {
          var match2 = 0;
        } else if (myString.indexOf(".") == 1) {
          var m = myRegexp2.exec(matchstring)
          var match2 = m[1];
        }

        starIMG = "<img src='http://qwerty/" + match + "_" + match2 + "/5/rating.gif' alt='' style='width:70px !important;' />";

        /*alert(match2); */
        jQuery(this).html(starIMG);
        /* alert(starIMG); */
      });

    });
  });

</script>

Answer 1

调用jQuery().noConflict();会抛出错误:

未捕获的TypeError:jQuery(...).noConflict不是函数

当不在try { ... }块内时,将导致该脚本的其余部分根本不执行.

noConflict 是主jQuery命名空间对象的一部分,但不是单个jQuery对象的一部分,因此您应该从中删除括号jQuery():

jQuery.noConflict();

有关详细信息,请参阅此处:http://learn.jquery.com/using-jquery-core/dollar-object-vs-function/

Answer 2

正如其他人所提到的,你需要使用jQuery.noConflict(),但每当调试这样的东西时你想要最小化所有的运动部件.我将在下面描述的内容不太可能对您造成任何问题,但它突出了jQuery的一个非常明显的滥用,你应该尝试并遵循.您有以下代码:

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

这相当于编写以下内容:

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

你看到了两面性吗？让我解释:

1. 以下两行完全相同:

   $(function() { /* execute code */ });
   $(document).ready(function () { /* execute code */ });
   

   因此,当您将其中一个放入另一个内部时,就像您已经完成的那样,您实际上是在说"等到文档准备就绪,然后等到文档再次准备就绪,然后执行代码".这是多余的,不必要的.

2. 无论何时使用上述任何一个"文档就绪"语句,都可以为jQuery提供一个不同的名称,以便在回调函数中使用.例如,fOobar如果我们想要,我们可以重命名jQuery :

   $(function(fOobar) {
       fOobar('#scroll').trigger('forward');
   });
   

3. 上述技术在使用时特别有用noConflict().没有人喜欢打字,jQuery因为$美元符号更容易.但noConflict()意味着你不能使用美元符号.要解决此问题,我们可以将jQuery重命名为美元符号,而不会影响页面上的其他代码:

   jQuery.noConflict();
   jQuery(function ($) {
     // you can safely use the dollar sign variable inside this function
     // instead of the cumbersome `jQuery` variable.
   });
   

4. 最后,每次将选择器传递给jQuery时,都需要做很多工作才能在页面中找到该元素.为了防止jQuery太累,我们可以保存(或缓存)jQuery已经完成的工作并重用它.以下是缓存#scroll元素时代码的外观:

   jQuery.noConflict();
   jQuery(function ($) {
     // get the #scroll element once and reuse it
     var $scroller = $('#scroll');
     $scroller.scrollbox({
       direction: 'h',
       switchItems: 3,
       distance: 540,
       autoPlay: false
     });
     $('#scrool-backward').click(function() {
       $scroller.trigger('backward');
     });
     $('#scrool-forward').click(function() {
       $scroller.trigger('forward');
     });
   });