如何在 Magento 1.9.0.1 rwd 主题上使用 jQuery？

Question

我注意到 Magento 1.9.0.1 rwd 主题现在包含 jQuery 库并使用“jQuery.noConflict();”默认与“$j”令牌相关联。

首先，我想使用 google CDN jQuery 库而不是本地 jQuery 库。

其次，如何运行我的 jQuery 代码？

例如，我尝试在 minicart.phtml 中插入：

    .....
       $_cartQty = 0;
    }
?>


<script type="text/javascript">
    $j(document).ready(function() {
        $('#header-cart').hide();
    });
</script>


<a href="#header-cart" class="skip-link skip-cart <?php if($_cartQty <= 0): ?> no-count<?php endif; ?>">
    <span class="icon"></span>
    ........

另外，我尝试在 app.js 的末尾添加我的代码：

.....
};

$j(document).ready(function() {
    ProductMediaManager.init();
});

$j(document).ready(function() {
    $('#header-cart').hide();
});

但没有效果。我哪里错了？如何在 app/js 文件夹中的单独文件中运行我的代码？

Answer 1

“首先，我想使用 google CDN jQuery 库而不是本地 jQuery 库。”

在提出简单问题之前，您应该进行更多研究，以下内容来自this post 和this post。总的来说，我认为仅仅依靠第三方是不值得的。

在您主题的 local.xml 布局文件中添加此内容。

<default>
    <reference name="head">
        <action method="addItem"><type>skin_js</type><name>js/lib/jquery-1.10.2.min.js</name></action>
        <block type="core/text" name="google.cdn.jquery">
            <action method="setText">
                <text><![CDATA[<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery||document.write('<script src="/skin/frontend/rwd/default/js/lib/jquery-1.10.2.min.js">\x3c/script>');</script>
<script>jQuery.noConflict();</script>]]></text>
            </action>
        </block>
    </reference>
</default>

---

“第二，如何运行我的 jQuery 代码？”

$j(document).ready(function() {
    $('#header-cart').hide();
});

在这里你知道你必须使用$j 而不是$ 但你忘记了第二行！有很多方法可以改变它，

1. 使用$j无处不在：

   $j(document).ready(function() {
       $j('#header-cart').hide();
   });
   

2. 使用the function argument重命名$j：

   $j(document).ready(function($) {
       // $ is different inside this function only
       $('#header-cart').hide();
   });
   

3. 改用原型：

   // $j is alias for jQuery
   $j(document).ready(function() {
       // $ is Prototype alias for document.getElementById
       $('header-cart').hide();
   });
   

Answer 2

为避免与prototype.js 发生冲突，您需要使用jQuery 而不是$

例如代替：

$(document).ready(function(){
    // do something
});

写：

jQuery(document).ready(function(){
    // do something
});