Jquery 在 Magento 中不起作用答案

【问题标题】：Jquery not working in MagentoJquery 在 Magento 中不起作用
【发布时间】：2013-12-03 04:55:05
【问题描述】：

我在 C:\wamp\www\magento\app\design\frontend\base\default\template\catalog\product\view.phtml 中使用 Tab 选项，与以下 Jquery 一起使用，

<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('ul.tabs').each(function(){
      var active, content, links = $(this).find('a');
      active = links.first().addClass('active');
      content = $(active.attr('href'));
      links.not(':first').each(function () {
        $($(this).attr('href')).hide();
      });
      $(this).find('a').click(function(e){
        active.removeClass('active');
        content.hide();
        active = $(this);
        content = $($(this).attr('href'));
        active.addClass('active');
        content.show();
        return false;
      });
    });
  });
</script>

如果我给出这个，添加到购物车 不起作用。在 prototype.js 的 Console 中出现以下错误，

Uncaught TypeError: Object [object Object] has no method 'attachEvent'

Uncaught TypeError: Object [object Object] has no method 'dispatchEvent'

如果我删除，<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 然后 添加到购物车 工作正常。但“选项卡选项”不起作用。

如何实现两者？

【问题讨论】：

使用 firebug 检查冲突问题。
" $($(this).attr('href'))"... 这真的是一个匹配任何东西的选择器吗？
始终为您的自定义 jquery 代码和库使用 jQuery.noConflict()。

标签： javascript php jquery magento tabs

【解决方案1】：

 <script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>jQuery.noConflict()</script>
        <script>
          jQuery(document).ready(function($) {
            $('ul.tabs').each(function(){
              var active, content, links = $(this).find('a');
              active = links.first().addClass('active');
              content = $(active.attr('href'));
              links.not(':first').each(function () {
                $($(this).attr('href')).hide();
              });
              $(this).find('a').click(function(e){
                active.removeClass('active');
                content.hide();
                active = $(this);
                content = $($(this).attr('href'));
                active.addClass('active');
                content.show();
                return false;
              });
            });
          });
        </script>

【讨论】：

【解决方案2】：

请试试这个.......

    <script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
      jQuery.noConflict();
     var $j = jQuery.noConflict();
      $j(document).ready(function() {
        $j('ul.tabs').each(function(){
          var active, content, links = $j(this).find('a');
          active = links.first().addClass('active');
          content = $j(active.attr('href'));
          links.not(':first').each(function () {
        $j($j(this).attr('href')).hide();
          });
          $j(this).find('a').click(function(e){
        active.removeClass('active');
        content.hide();
        active = $j(this);
        content = $j($j(this).attr('href'));
        active.addClass('active');
        content.show();
        return false;
          });
        });
      });
    </script>

【讨论】：

【解决方案3】：

您正在将 jQuery 库添加到 view.phtml 中，并且页面上已经加载了其他原型库。这就是它引发错误的原因。从布局 catalog.xml 添加这个 jQuery 库。

添加外部JS方法：

<action method="setText">
<text><![CDATA[<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript">jQuery.noConflict();</script>]]></text>
</action>

或

下载库并保存到js/目录并从那里添加它。

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

希望能有所帮助！

【讨论】：

谢谢老兄。我没有尝试更复杂的。所以就用简单的那个ans。
这是你的选择，我只分享了将自定义 js 库添加到 magento 中的唯一最佳方法。 :)

【解决方案4】：

在 Head.phtml 中添加 jquery.min.js 文件，并在 jquery.min.js 下方添加 jQuery.noConflict() 以在单个页面上调用 js。

那么，就不会有js冲突的问题了:)

【讨论】：