Magento + jquery 滑块 $ 未定义答案

【问题标题】：Magento + jquery slider $ is not definedMagento + jquery 滑块 $ 未定义
【发布时间】：2011-06-07 08:51:22
【问题描述】：

我正在将内容滑块集成到 magento 主题中，但 js 存在一些问题。我收到错误“$ 未定义”，然后我从网站上找到了一个解决方案，说明我应该添加这一行“jQuery.noConflict();”进入我的 jquery 文件。

然后在home.phtml中，:-

<script type="text/javascript">
var $s = jQuery.noConflict();
    $s(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
</script>

在我的 page.xml 中，这就是我包含 js 的方式

<action method="addJs"><script>jquery/jquery.js</script></action>
<action method="addJs"><script>jquery/jquery-ui.min.js</script></action>

<action method="addJs"><script>prototype/prototype.js</script></action>

完成上述更改后，我收到错误“未定义 jQuery”

感谢任何建议。提前致谢！

编辑：这个问题是通过从CMS页面调用js来解决的->内容：-

<script type="text/javascript">// <![CDATA[
   var $j = jQuery.noConflict();  jQuery(document).ready(function($) { jQuery("#featured  ul").tabs({fx:{opacity:"toggle"}}).tabs("rotate", 5000, true); }); //  &gt;
// ]]></script>

在 CMS 页面 -> 设计，包含所需的 js 文件：-

<reference name="head">
  <action method="addItem"><type>skin_css</type><name>css/slider.css</name></action>
  <action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/jquery-ui.min.js</name></action>
</reference>

但是，这种方法只有在只有特定页面使用 js 而不是每个页面时才有用。 :)

【问题讨论】：

标签： jquery jquery-ui magento

【解决方案1】：

实际上，除了马修的建议之外，还有一个更好的选择。

使用闭包来限制 $ 的范围，在您的示例中，您需要更改以下代码：

$(document).ready(function(){
    $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});

例如：

jQuery.noConflict();
(function($) {
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
})(jQuery);

此外，您需要将这些 addJs 调用放入引用“head”中，以将它们放在 HTML 源代码中的正确位置。现在，它们可能位于根块中。

【讨论】：

您好丹尼尔，感谢您的回复。我已经尝试了您的建议，但仍然收到错误“未定义 jQuery”。任何想法为什么我会收到此错误？
嗨丹尼尔，谢谢。很抱歉，但我不明白最后一部分“您需要将这些 addJs 调用放入引用 'head' 中，以将它们放在 HTML 源代码中的正确位置。现在，它们可能位于根块中。 "你的意思是我应该把js放在.phtml中吗？
@Sylph，不：您在 page.xml 中添加了那些 addJs 操作调用，但不在正确的块内，您需要将它们放在引用“head”中。
非常感谢丹尼尔，我采取了另一种方法是从 CMS Layout Update XML 输入参考头并将 js 复制到皮肤路径。 jQuery未定义的错误现在消失了，只是幻灯片仍然无法正常工作。我会尝试从这里解决它。感谢你的帮助！ :)
我已经在上面发布了解决方案。再次非常感谢！ :)

【解决方案2】：

在/template/page/html/head.phtml的末尾插入以下代码

<script type="text/javascript">
    jQuery.noConflict();
</script>

在脚本文件中使用 jQuery 而不是 $。你的代码看起来像

<script type="text/javascript">    
 jQuery(document).ready(function(){
          jQuery("#featured > ul").tabs({fx:{opacity:"toggle"}}).tabs("rotate", 5000, 
 true);
      }); 
 </script>

jquery 1.5.2v 与 magento 配合得很好。

希望这会对你有所帮助。

【讨论】：

嗨，blakcaps，感谢您的回复。我把它的脚本放在“header.phtml”中，因为我没有head.phtml。尽管“未定义 jQuery”，但仍然出现相同的错误。 :(
从基本主题中复制head.phtml并放到你的主题目录中试试。不要在header.phtml中添加脚本
嗨 blakcaps。非常感谢。我已经在网站上这样做了，但仍然是同样的错误。似乎它根本无法获取 jquery？然后我去 js 文件和 "alert('aa')" ，我实际上能够得到警报框，这意味着文件正在被调用。
您已向哪个js文件添加警报。您是否仍然收到“未定义jQuery”错误
是的，不知道为什么。我采取了另一种方法是从 CMS 的 Layout Update XML 输入路径并将 js 文件复制到皮肤路径。错误已消失，但幻灯片仍无法正常工作。我会尝试从这里解决它。非常感谢您的帮助！真的很感激。

【解决方案3】：

您必须更改脚本中的所有 $ 实例才能使用 jQuery()。有关更多信息，请参阅文档：

http://api.jquery.com/jQuery.noConflict/

您也可以使用 mXperts 插件来完成这项工作：

http://www.magentocommerce.com/magento-connect/mxperts/extension/1619/mxperts--jquery-base

【讨论】：

嗨，马修，感谢您的回复。我已更改实例，但出现错误“未定义 jQuery”:(
恕我直言，很难做到正确。 MxPerts 解决方案可能是您前进的最佳方式，因为您可以将脚本粘贴到管理员中，它会为您执行 $ -> jQuery。您将需要删除您的标头脚本并将其留给插件。
你调用过 jQuery.noConflict() 吗？您也可以先尝试包含原型。
嗨，Mathew，非常感谢您的评论：D Hi Gordon，也感谢您的评论。我试过改变位置（先调用ng原型然后是jquery），但无济于事。我调用了 jQuery.noConflict() 但仍然收到相同的错误，“jQuery 未定义”。我有点卡住了..大声笑>“
感谢 Mat 的链接，但我不想为这个特定的一个使用扩展，因为我需要在何时使用 jquery，并且扩展不支持所有 jquery 功能。 :) 已经设法解决了这个问题。感谢您的帮助！

【解决方案4】：

您可以使用var $j = jQuery.noConflict();。此代码进入您的脚本，并使用$j 代替$。

【讨论】：