Magento：自定义文件中的 jQuery 不起作用答案

【问题标题】：Magento: jQuery in custom file does not workMagento：自定义文件中的 jQuery 不起作用
【发布时间】：2014-06-03 04:51:59
【问题描述】：

所以我正在尝试向 magento 主题添加一些简单的 jQuery。我已将我的 jQuery 放在一个外部文件中，该文件位于主题的“js”（skin/frontend/default/myTheme/js）文件夹中。这是我网站的链接：http://shop.veivecouture.com/ 我使用以下方法将其包含在 page.xml 文件中：

<action method="addItem"><type>skin_js</type><name>js/functions.js</name></action>

我也试过了：

<action method="addJs"><script>../skin/frontend/default/trego/js/functions.js</script></action>

我将它们都放在“头部”块中，如下所示：

<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>scriptaculous/effects.js</script></action>
   <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
   <action method="addJs"><script>scriptaculous/controls.js</script></action>
   <action method="addJs"><script>scriptaculous/slider.js</script></action>  
   <action method="addJs"><script>varien/js.js</script></action>
   <action method="addJs"><script>varien/form.js</script></action>
   <action method="addJs"><script>varien/menu.js</script></action>
   <action method="addJs"><script>mage/translate.js</script></action>
   <action method="addJs"><script>mage/cookies.js</script></action>

   <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    <action method="addItem"><type>skin_js</type><name>js/functions.js</name></action> <!-- my line -->

    <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
    <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
    <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
    <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
    <action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>
</block>

我可以通过“查看源代码”访问这两个文件，所以链接似乎是正确的，但是没有 jQuery 生效。我做错了什么？

这是functions.js文件中的javascript：

$('.block-content').hide(); //edit by Carl Papworth
$('.block-title').click(function(e){
    e.preventDefault();
    $('.block-content').show();
    $('.close-block').click(function(e){
        e.preventDefault();
        $('.block-content').hide();
    });
});

【问题讨论】：

标签： javascript jquery xml magento

【解决方案1】：

将文件放入magento js文件夹并尝试

    <action method="addJs"><script>js/your_custom_folder/functions.js</script></action>

【讨论】：

在哪里可以找到该文件？现在它位于 (skin/frontend/default/myTheme/js)
在magento的主目录下，有skin、app、lib、var等文件夹
试了一下，发现文件没问题，但是没有jQuery生效。
在你的functions.js或$j = $.noConflict();开头写$.noConflict();并使用$j而不是$
试试看firebug，它的prototype和jquery冲突，改变调用文件的顺序可能会解决问题或添加noConflict()到你的文件

【解决方案2】：

尝试在你的 js 文件的最底部添加jQuery.noConflict();。

【讨论】：

【解决方案3】：

将此添加到您的头部：

<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/specification.js');?>" media="screen"></script>

【讨论】：