Magento 中的 jQuery

Question

我用 jQuery 编写了一个小 slider 脚本，我想在我的 Magento 商店中运行它。我已将此脚本包含在我的 view.phtml 中，但它似乎不起作用。我究竟做错了什么？我对 Magento 还很陌生，不知道如何添加自定义脚本。

<script type="text/javascript">// < ![CDATA[
        jQuery(document).ready(function(){
        var active = 0; // starts at zero
        var list = jQuery('ul');

        list.children('li').eq('0').siblings().hide(); // Hide all except first list element

       jQuery('.next').bind('click', function() {
            active = active == list.children('li').length-1 ? 0 : active + 1;
        });

        jQuery('.prev').bind('click', function() {
            active = active == 0 ? list.children('li').length-1 : active - 1;
        });

        var getActive = function() {
            return list.children('li').eq(active);
        };

        jQuery('.prev,.next').bind('click', function() {
            getActive().fadeIn().siblings().hide();
        });

 });// ]]></script>

这是我在 view.phtml 中的 HTML:

<ul>
   <li>img1</li>
   <li>img1</li>
   <li>img1</li>
</ul>

Answer 1

首先要做的事情:Magento 不使用 jQuery。

Magento 使用 PrototypeJs ，或者将 jQuery 转换为 PrototypeJs，或者必须加载 jQuery，使用 noConflict方法，以便它们都能无缝运行。

要在页面中加载 jQuery，您可以使用 .xml 模板将其加载到所有页面中，或者如果仅在这个特定页面中，您可以简单地在脚本之前加载它，例如:

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
   // noConflict so we can use both libraries
   $.noConflict(); 

   // your current code here

//]]>
</script>

如果您想通过设计模板加载所有页面，here is a suggestion .