Question

我在我的网站上使用jQuery 1.4.2固定栏，滚动时滚动网站。

但是我也正在使用1.6.1作为我正在做的facebook事情，当我将它们加在一起时，条形图断开并且facebook的功能正常，但是当我添加noConflict时，条形图可以工作，但是Facebook破解了，所以如果你能查看我的代码并帮助我？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" href="themes/default/jx.stylesheet.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var mc$ = jQuery.noConflict();
</script>
<script type="text/javascript" src="src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
mc$(document).ready(function() {
    mc$("#floating-bar").jixedbar();
}); 
</script>

<style type="text/css">
body {
margin: auto;
background-image: url(template.png);
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>

<body>
<div id="floating-bar">
  <ul>
        <li title="Home"><a href="http://www.atomicstarstudios.com/"><img src="icons/home.png" alt="" /></a></li>
    </ul>
    <span class="jx-separator-left"></span>
    <ul>        
        <li title="Around The Web"><a href="#"><img src="icons/network.png" alt="Share" /></a>
            <ul>
<div id="fb-root"></div>

<!-- USE 'Asynchronous Loading' version, for IE8 to work
http://developers.facebook.com/docs/reference/javascript/FB.init/ -->

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId  : '209445949091775',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });
  };

  (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());
</script>




                <li><a id="share_button" href="#"><img src="icons/facebook.png" title="Facebook" />&nbsp;&nbsp;&nbsp;Facebook</a></li>
              <script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'Atomic Star Studios',
link: 'http://www.facebook.com/pages/Atomic-Star-Studios/228192187207829',
picture: 'http://www.atomicstarstudios.com/logo.jpg',
caption: 'http://www.atomicstarstudios.com/',
description: 'This is the content of the "description" field, below the caption.',
message: 'Visit Atomic Star Studios for excellent prices on great printg and professional design! We Have All Your Marketing Needs!!!'
});
});
});
</script>
    <li><a href="http://www.twitter.com/atomstars"><img src="icons/twitter.png" title="Twitter" />&nbsp;&nbsp;&nbsp;Twitter</a></li>
            </ul>
        </li>
    </ul>
    <span class="jx-separator-left"></span>
    <ul>
        <li title"Top Pages"><a href="#">Top Pages</a>
            <ul>
                <li title="About"><a href="#"><img src="icons/info.png" alt="About" /></a></li>
                <li title="Products"><a href="#"><img src="icons/blogs.png" alt="Products" /></a></li>
                <li title="Portfolio"><a href="#"><img src="icons/block.png" alt="Portfolio" /></a></li>
            </ul>
        </li>
    </ul>
    <span class="jx-separator-left"></span>        
    <div class="text-container">Like us on Facebook!</div>
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/pages/Atomic-Star-Studios/228192187207829&layout=button_count&send=true&show_faces=false&width=100&action=like" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:30px;" allowTransparency="true"></iframe>
    <a href="http://twitter.com/atomstars" class="twitter-follow-button">Follow @atomstars</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
    <span class="jx-separator-left"></span>
    <ul>
        <li title="Facebook"><a href="http://www.facebook.com/pages/Atomic-Star-Studios/228192187207829"><img src="icons/facebook.png" alt="" /></a></li>
        <li title="Twitter"><a href="http://www.twitter.com/atomstars"><img src="icons/twitter.png" alt="" /></a></li>
    </ul>
    <span class="jx-separator-left"></span>
    <ul>
        <li title="Chat with us Live!"><a href="javascript:void(window.open('http://www.atomicstarstudios.com/livezilla/chat.php','','width=590,height=610,left=0,top=0,resizable=yes,menubar=no,location=no,status=yes,scrollbars=yes'))"><img src="http://www.atomicstarstudios.com/livezilla/image.php?id=04&amp;type=inlay"></a></li>
    </ul>
    <span class="jx-separator-right"></span>
</div>
</body>
</html>

Answer 1

您的代码存在两个问题。

首先，你应该在两个jQuery请求之间调用noConflict，而不是在第二个jQuery请求之后。您需要使用版本的每个版本的jQuery加载所需的模块，以便在调用noConflict时，随之移动对插件的引用。您还应该向noConflict添加“true”，以便在加载第二个jQuery之前删除对jQuery的所有引用：

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
  var mc$ = jQuery.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

有关详细信息，请参阅jQuery.noConflict文档。

话虽如此，你应该考虑找到一种不必这样做的方法。这不是一种使用jQuery的优雅方式。

回答@TGR ：亲自尝试一下，你会亲眼看到我的解决方案完美无缺：

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://jixedbar.googlecode.com/svn/trunk/src/jquery.jixedbar.min.js"></script>
    <script type="text/javascript">
      var mc$ = jQuery.noConflict(true);
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(function()
      {
        alert('jQuery ' + mc$.fn.jquery + ': ' + ( typeof mc$.fn.jixedbar ));
        alert('jQuery ' + jQuery.fn.jquery + ': ' + ( typeof jQuery.fn.fixedbar ));
      });
    </script>

    <title>6367968</title>
  </head>
  <body>
    <p>6367968</p>
  </body>
</html>

第一个警报将显示“jQuery 1.4.2：function”，而第二个警告将显示“jQuery 1.6.1：undefined”。

Answer 2

加载jQuery 1.4
加载需要使用1.4
使用noConflict
加载jQuery 1.6

问题是jQuery插件倾向于以这种方式编写：

(function($) {
    // plugin code using $ for jQuery calls
})(jQuery)

我。即他们有插件加载时window.jQuery所有内容的内部副本，之后你无法改变它。

更新更详细了解noConflict的工作原理（评论时间过长）。加载jQuery时，它会创建一个包含其所有函数和数据的对象，并将window.$和window.jQuery设置为该对象。 window.$和window.jQuery的旧值保存在对象中。

当您致电noConflict时，会恢复已保存的值（默认情况下为$;如果您使用true调用，jQuery也是如此。如果你在加载jQuery之前在那些变量中有某些东西，并且不希望它被覆盖，那么这很有用。例如。如果你加载了这样的东西：

加载jQuery 1.6

加载jQuery 1.4

致电noConflict(true)

然后第一步将jQuery 1.6放入$和jQuery，第二步将用1.4覆盖它们，noConflict将恢复$和{{1}到1.6版本。

但是，由于您先加载1.4并在两者之间调用jQuery，因此恢复的noConflict和$的旧值为jQuery，这不是特别的有用，并且会被1.6覆盖，所以undefined调用除了返回noConflict的值之外没有做任何有用的事情，然后可以通过其他名称$存储案件）。 $mc也可以正常工作。

对于插件，自动执行功能会在插件加载时复制var $mc = $;的值，之后window.jQuery发生的事情并不重要：

window.jQuery

使用jQuery 1.4.2和1.6.1但noConflict不起作用

2 个答案: