Javascript 为什么jQuery Flipcounter在Magento中冲突？

我正在尝试将

flipcounter

添加到from的主页

添加以下脚本后，页脚中的“新闻稿”按钮将不起作用

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.flipCounter.1.2.pack.js" type="text/javascript"></script>

---

我注意到Magento已经有了jQuery 1.8.2，所以我还需要添加jQuery 1.6.2吗？

尝试在ready函数中添加此jQuery，并在控制台中给出错误，我希望它能解决您的问题

$('.vid_trigger').click( function(e){

            e.preventDefault();
            $( "#showSlideshowVideo" ).remove();
            var URL = $(this).attr('videoLink');
            var htm = '<iframe width="640" height="360" style="width:640px;height:360px;" src="http://www.youtube.com/embed/' + URL + '?autoplay=1" frameborder="0" allowfullscreen ></iframe>';

                $('#lightVideoBox').append(htm);

            return false;
        });

$（'.vid_触发器'）。单击（函数（e）{
e、 预防默认值（）；
$（“#showSlideshowVideo”）.remove（）；
var URL=$（this.attr（'videoLink'）；
var htm=''；
$（#lightVideoBox'）。追加（htm）；
返回false；
});

您需要以jQuery.noConflict（）开始脚本；并将“$”更改为“jQuery”，否则脚本将无法很好地与本机原型框架配合使用

jQuery.noConflict();
(function(jQuery) { 
   jQuery(function() {
   // ... No $s
   });
})(jQuery);
// ... No $s

至于jQuery库，我认为Magento只在特定页面上为特定功能调用它，比如启用图像缩放。因此，您需要在主页中调用jQuery库。最佳做法是将以下内容添加到local.xml中

<cms_index_index><!-- Handle pinpoints the home page -->
   <reference name="head"><!-- Identifies the head block -->
      <action method="addItem">
         <type>skin_js</type>
         <name>js/jquery.min.js</name><!-- specify your library location and file name within skin/js -->
      </action>
   </reference>
</cms_index_index>

皮肤
js/jquery.min.js

---

您可以始终在CMS页面管理中使用页面的布局更新，方法是输入相同的XML，但不输入布局句柄。

检查firebug中的控制台我添加了一条注释尝试添加$（'.vid_trigger'）。单击（函数（e）{in ready function并让我知道它已完成。在控制台$（）是null。您好，此代码不是针对计数器的，并且它已经在jQuery的就绪函数中，我认为它给出错误的原因是，页面上缺少类为“vid_trigger”的元素。如果查看flipcounter链接，则可以在步骤3和5中看到flipcounter的代码。

<cms_index_index><!-- Handle pinpoints the home page -->
   <reference name="head"><!-- Identifies the head block -->
      <action method="addItem">
         <type>skin_js</type>
         <name>js/jquery.min.js</name><!-- specify your library location and file name within skin/js -->
      </action>
   </reference>
</cms_index_index>