jquery - Magento 显示 jQuery 相互冲突

Question

我是Magento的新手。我使用横幅 rotaor 脚本来显示横幅。因为我必须在每个页面中显示横幅，所以我在header.phtml文件中实现了滑块，以便我可以在每个页面中显示横幅。所以在 header.phtml 我的滑块代码是这样的

    <script language="javascript">
         jQuery.noConflict();
        jQuery(document).ready(function(){
          bannerRotator('#bannerRotator', 500, 5000, true);
        });
      </script>
<div id="bannerRotator">
  <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('homepageslider')->toHtml(); ?>
</div>

这里的滑块运行良好，但是当我console tab在 Firefox 中查看时出现了一些错误。这是控制台选项卡错误的图像。 为了解决所有问题，我用谷歌搜索并知道 jQuery 存在冲突。所以要明确我使用jQuery.noConflict并删除了所有$的jQuery. 但我仍然遇到同样的问题。任何帮助和建议都将是非常可观的。谢谢

现场网站可以在这里找到

Answer 1

在 app/design/frontend/default/[theme name]/template/page/html/head.phtml 文件中包含 jquery.noConflict。

您想在包含 jquery 之后和 getCssJsHtml() 之前添加它

我在实现中更进一步，并将其调用为 $j var，但您可以这样做或只实现 jquery.noConflict();

如果您使用 var $j，那么您的所有 jQuery 调用都将使用该对象。

我这样做了：

!-- adding jQuery -->
<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
     var $j = jQuery.noConflict();
//]]>
</script>
<!-- ************* -->

<?php echo $this->getCssJsHtml() ?>

在你的 header.phtml 中，你需要像这样调用你的滑块：

<script language="javascript">
$j(document).ready(function(){
          bannerRotator('#bannerRotator', 500, 5000, true);
        });
</script>

Answer 2

你有两个问题。

1)

您包含 jQuery两次。您已经包含 jquery.js (1.7.1)，并且 jquery-1.4.4.min.js 还包含在更下方。这导致了正在看到的问题。

在项目中搜索字符串“jquery-1.4.4.min.js”，您可能会在 XML 配置文件中找到一个 exntry，尝试将其注释掉。

可能两个模块都通过 Magento XML 配置添加 jquery。删除模块 XML 配置文件中的这些条目之一，问题应该会消失。我建议删除 jquery-1.4.4.min.js，因为它包含在大多数其他 jquery 插件之后，这将导致更多问题。

2)

jQuery.noConflict() 在使用 jquery 后调用。如上所述，最好的解决方法是打开 jquery.js 文件，并将其添加到文件的最后： ;jQuery.noConflict();

Answer 3

根据我的经验，解决冲突的最佳方法如下：

• 删除 1 个版本的 jQuery - 你已经安装了 2 个。通常最新的应该与您的所有插件兼容。
• 编辑您的 jQuery 文件并制作，例如：jquery-1.7.1-custom.js
  • jQuery.noConflict();在文件末尾添加。
• 您所做的是正确的 - 不要使用 $ 符号，只需对所有内容使用 jQuery 前缀即可。
• 在你的情况下最重要的。确保您的文件按以下顺序加载：
  • 原型
  • jQuery（自定义）
  • jQuery 插件

Answer 4

您的主要问题是您在原型之前包含 jquery（查看页面源代码）

 <script type="text/javascript" src="..../js/jquery/jquery.js"></script>
 <script type="text/javascript" src="..../js/prototype/prototype.js"></script>

您需要将其更改为

 <script type="text/javascript" src=".../js/prototype/prototype.js"></script>
 <script type="text/javascript" src=".../js/jquery/jquery.js"></script>
 //best to add  jQuery noConflict right after

修复这个打开

/design/frontend/default/[主题]/layout/page.xml

或（如果上面没有找到 jquery）

/app/design/frontend/default/[主题]/template/page/html/head.phtml

您的 page.xml 应该看起来像

<default translate="label" module="page">
    ......
        <block type="page/html_head" name="head" as="head">
            <action method="addJs"><script>prototype/prototype.js</script></action>
            <action method="addJs"><script>lib/ccard.js</script></action>
            <action method="addJs"><script>prototype/validation.js</script></action>
            <action method="addJs"><script>scriptaculous/builder.js</script></action>
            ......
            <action method="addJs"><script>mage/translate.js</script></action>
            <action method="addJs"><script>mage/cookies.js</script></action>


            <action method="addItem"><type>skin_js</type><name>js/jquery-1.7.2.min.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/jquery.noconflict.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/jqforms/jquery.jqtransform.js</name></action>
           <!- all other jquery plugin below -->
   .....

创建一个文件调用 jquery.noconflict.js 并添加

 var $j = jQuery.noConflict(); // you could also add this  to the end of jquery-1.7.2.min.js

在您的自定义 jquery 代码中，您不能$...再使用（仅由prototypeJs 使用）您需要使用$j...或jQuery...

然后删除

  <script src="http://modulesoft.biz:/projects/magento/extream/skin/frontend/base/default/js/jquery-1.4.4.min.js"></script>

Answer 5

你可以使用这个 Magento 模块：https ://github.com/sotastudio/Mage.Ext.Jquery

它只是重新组织了 JavaScript 内容的包含并将 jQuery 直接设置为第一个位置。此外，您可以在此代码段中轻松触发 jQuery 内容：

(function($) {
  $(function() {
    //console.log($('body'));
  });
})(jQuery);

Answer 6

您必须添加jQuery.noConflict();到 jquery.js 脚本文件的末尾，而不是在它之外，因为它必须在prototype.js 脚本被包含之前被调用。