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时，我遇到了一些错误。这是控制台选项卡错误的图像。 enter image description here 为了解决我用Google搜索的所有问题并且知道jQuery是冲突的。因此，要清除我使用jQuery.noConflict并将所有$移除到jQuery。但我仍然遇到同样的问题。任何帮助和建议都会非常明显。感谢

可以找到实时网站here

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之后调用jQuery.noConflict（）。如上所述，获取arounf的最佳方法是打开jquery.js文件，并将其添加到文件的最后： ; jQuery.noConflict（）;

Answer 3

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

Answer 4

您可以使用此Magento模块：https://github.com/sotastudio/Mage.Ext.Jquery

它只是重新组织了JavaScript的内容并将jQuery直接设置到第一个位置。另外，您可以轻松地在此片段中触发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

修复此打开

/设计/前端/默认/ [主题] /layout/page.xml

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

/应用/设计/前端/默认/ [主题] /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>

Magento显示jQuery彼此冲突

6 个答案: