javascript Jquery 在 Magento 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20343171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery not working in Magento
提问by KarSho
I'm using Tab optionin my C:\wamp\www\magento\app\design\frontend\base\default\template\catalog\product\view.phtml, using with following Jquery,
我使用的标签选项在我 C:\wamp\www\magento\app\design\frontend\base\default\template\catalog\product\view.phtml，与下面的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>
If I give this, Add to Cartis not working. Giving following error in Consolefrom prototype.js,
如果我给这个，添加到购物车不起作用。从prototype.js在控制台中给出以下错误，
Uncaught TypeError: Object [object Object] has no method 'attachEvent'
Uncaught TypeError: Object [object Object] has no method 'dispatchEvent'
If I remove, <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>then Add to Cartworking fine. But 'Tab option' not working.
如果我删除，<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>然后添加到购物车工作正常。但是“选项卡选项”不起作用。
How I can Implement Both?
我如何才能实现两者？
回答by Zaheerabbas
<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>
回答by Nikunj Vadariya
please try this.......
请试试这个......
<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>
回答by Rajiv Ranjan
You are adding jQuery library into view.phtml and other prototype library are already loaded on page. That's why it raising error. Add this jQuery library from layout catalog.xml.
您正在将 jQuery 库添加到 view.phtml 中，并且其他原型库已经加载到页面上。这就是为什么它会引发错误。从 layout 添加这个 jQuery 库catalog.xml。
Add External JS Method:
添加外部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>
OR
或者
Download library and keep into js/directory and add it from there.
下载库并保存到js/目录中并从那里添加它。
<action method="addJs"><script>jquery.min.js</script></action>
Hope will help!
希望会有所帮助！
回答by Jagi Yadav
Add the jquery.min.js file in Head.phtml , also add jQuery.noConflict() jut below the jquery.min.js inseated of calling js on individual page.
在 Head.phtml 中添加 jquery.min.js 文件，还在单个页面上调用 js 的 jquery.min.js 下方添加 jQuery.noConflict() 突出部分。
then, there will not be any js conflicting issue :)
那么，不会有任何 js 冲突问题:)
