jQuery 和 MooTools 冲突答案

【问题标题】：jQuery and MooTools ConflictjQuery 和 MooTools 冲突
【发布时间】：2010-05-11 11:56:40
【问题描述】：

好的，所以我用一个脚本让 jQuery 与 MooTools 相处，通过在 jQuery 脚本的顶部添加这个：

var $j = jQuery.noConflict();

然后替换每个：

$(

与

$j(

但是如何让 MooTools 喜欢以下使用 jQuery 的脚本？？

提前感谢您的任何意见，

特蕾西

//Fade In Content Viewer: By JavaScript Kit: http://www.javascriptkit.com

var fadecontentviewer={
 csszindex: 100,
 fade:function($allcontents, togglerid, selected, speed){
  var selected=parseInt(selected)
  var $togglerdiv=$("#"+togglerid)
  var $target=$allcontents.eq(selected)
  if ($target.length==0){ //if no content exists at this index position (ie: stemming from redundant pagination link)
   alert("No content exists at page number "+selected+"!")
   return 
  }
  if ($togglerdiv.attr('lastselected')==null || parseInt($togglerdiv.attr('lastselected'))!=selected){
   var $toc=$("#"+togglerid+" .toc")
   var $selectedlink=$toc.eq(selected)
   $("#"+togglerid+" .next").attr('nextpage', (selected<$allcontents.length-1)? selected+1+'pg' : 0+'pg')
   $("#"+togglerid+" .prev").attr('previouspage', (selected==0)? $allcontents.length-1+'pg' : selected-1+'pg')
   $target.css({zIndex: this.csszindex++, visibility: 'visible'})
   $target.hide()
   $target.fadeIn(speed)
   $toc.removeClass('selected')
   $selectedlink.addClass('selected')
   $togglerdiv.attr('lastselected', selected+'pg')
  }
 },

 setuptoggler:function($allcontents, togglerid, speed){
  var $toc=$("#"+togglerid+" .toc")
  $toc.each(function(index){
    $(this).attr('pagenumber', index+'pg')
  })

  var $next=$("#"+togglerid+" .next")
  var $prev=$("#"+togglerid+" .prev")
  $next.click(function(){
   fadecontentviewer.fade($allcontents, togglerid, $(this).attr('nextpage'), speed)
   return false
  })
  $prev.click(function(){
   fadecontentviewer.fade($allcontents, togglerid, $(this).attr('previouspage'), speed)
   return false
  })
  $toc.click(function(){
   fadecontentviewer.fade($allcontents, togglerid, $(this).attr('pagenumber'), speed)
   return false
  })
 },

 init:function(fadeid, contentclass, togglerid, selected, speed){
  $(document).ready(function(){
   var faderheight=$("#"+fadeid).height()
   var $fadecontents=$("#"+fadeid+" ."+contentclass)
   $fadecontents.css({top: 0, left: 0, height: faderheight, visibility: 'hidden'})
   fadecontentviewer.setuptoggler($fadecontents, togglerid, speed)
   setTimeout(function(){fadecontentviewer.fade($fadecontents, togglerid, selected, speed)}, 100)
   $(window).bind('unload', function(){ //clean up
    $("#"+togglerid+" .toc").unbind('click')
    $("#"+togglerid+" .next", "#"+togglerid+" .prev").unbind('click')
   })
  })
 }
}

【问题讨论】：

和你已经做的一样...用$j(替换$(。
这不起作用，因为并非所有的 $ 都像 $( 那样设置，因此您可以简单地在两者之间添加一个“j”。有些是 $toc $target $selectedlink.ect.. .而不是美元符号/左括号，你有美元符号/名字。如果我把“j”放在那里，它真的搞砸了。
我觉得自己像个笨蛋！我做到了，不理会其他 $'names'，它奏效了！我会成为一个SOB！但是，如果没有 Dimitar Christoff 的回答，这将不会奏效，因为无论如何，它都覆盖了 MooTools。让 2 个 jQuery 脚本与 1 个 MooTools 脚本一起工作的唯一方法是重新分配所有 3 个脚本中的 $！
你可以使用这个语法var myElement2 = document.id('myElement');mootools.net/core/docs/1.5.1/Element/Element

标签： jquery mootools conflict

【解决方案1】：

当您有使用 $ 的 jQuery 特定代码时，最简单的方法是使用以下代码包装代码：

// Disable the $ global alias completely
jQuery.noConflict();

// For jQuery scripts
(function($){

// set a local $ variable only available in this block as an alias to jQuery
... here is your jQuery specific code ...

})(jQuery);

// For Mootols scripts
(function($){

// set a local $ variable only available in this block as an alias 
// to Mootools document.id
... here is your Mootools specific code ...

})(document.id);

请参阅noConflict documentation 上的第二个示例。

【讨论】：

反过来也是如此，即如果已经定义，mootools 将不会接管 $，但会恢复为 document.id（自 v1.2.1 起）。然后，您可以应用相同的闭包，但使用 document.id 而不是 jQuery 作为 $ 的参数
Dimitar，你说对了。我必须更改所有 3 个脚本才能使它们工作（仅更改 1 个脚本不起作用）。将 var $j = jQuery.noConflict() 添加到 JQuery 脚本中，并添加 var $ = document.id;到 MooTools 脚本，现在他们都可以愉快地一起工作了。如果没有您的评论，它永远不会奏效，并建议 v1.2.1 谢谢你！文森特，无论出于何种原因，这在我上面粘贴的脚本上不起作用。它适用于我添加的另一个 var $j = jQuery.noConflict();但不是上面的1。但我很高兴知道它何时起作用的较短提示。
我在回答中加入了 Dimitar 解决方案，以便为 Mootools 开发人员澄清一点

【解决方案2】：

我不知道 MooTools 提供的兼容模式，但一种简单的方法应该是将脚本中所有出现的$( 替换为$j( 或jQuery(。

【讨论】：

【解决方案3】：

将$ 替换为$jQuery，它应该可以工作。

【讨论】：