jQuery和MooTools冲突

Question

好的，所以我通过在jQuery脚本顶部添加以下代码使它能够与MooTools协同工作:

var $j = jQuery.noConflict();

然后将每个替换为：

$(

使用

$j(

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

提前感谢任何意见，

Tracy

//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')
   })
  })
 }
}

- flipflopmedia

---

你可以按照之前的方式进行操作，将 $( 替换为 $j(。 - Felix Kling

这并不起作用，因为并非所有$都像$(一样设置，以便您可以在两者之间简单添加“j”。有些是$toc $target $selectedlink.ect...，而不是美元符号/打开括号，你有美元符号/名称。如果我在那里插入“j”，它会真正破坏事情。 - flipflopmedia

我感觉自己像个傻瓜！我做到了，而且没有碰其他的“names”，它起作用了！我真是个混蛋！然而，如果没有Dimitar Christoff的答案，这是行不通的，因为无论如何，它都会覆盖MooTools。让这两个jQuery脚本与一个MooTools脚本愉快地工作的唯一方法是在所有三个脚本中重新分配$！ - flipflopmedia

你可以使用这个语法 var myElement2 = document.id('myElement'); http://mootools.net/core/docs/1.5.1/Element/Element - NoWar

Answer 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文档上的第二个示例。

- Vincent Robert

---

同样的事情反过来也是正确的，即 mootools 不会接管已经定义的 $，而是会恢复到 document.id（自从 v1.2.1 版本以来）。然后，您可以应用相同的闭包，但将 document.id 替换为 jQuery 作为 $ 的参数。 - Dimitar Christoff

Dimitar，你说得对。我不得不更改所有3个脚本才能使它们工作（只更改1个脚本不起作用）。将var $j = jQuery.noConflict()添加到JQuery脚本中，并将var $ = document.id;添加到MooTools脚本中，现在它们都可以愉快地一起工作了。如果没有你的评论和建议v1.2.1，它永远不会起作用。谢谢！Vincent，出于某种原因，这在我上面粘贴的脚本上没有起作用。它适用于我添加了var $j = jQuery.noConflict();的另一个脚本。但是当它起作用时，我很高兴知道这个更短的提示。 - flipflopmedia

我在我的答案中包含了Dimitar的解决方案，以便为Mootools开发人员澄清一些细节。 - Vincent Robert

Answer 2

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

- Raphael Michel

Answer 3

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

- rampatel