Magento 显示 jQuery 相互冲突

Question

我是Magento 的新手。我用banner rotaor script 显示横幅。因为我必须在每个页面中显示横幅，所以我在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>

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

现场可以找到here

Answer 1

在 app/design/frontend/default/[主题名称]/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

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

Answer 4

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

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

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

Answer 5

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

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

Answer 6

您的主要问题是您在原型之前包含 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>