Jquery 与原型 magento 冲突 - 我如何分离？

Question

我的 Magento 网站似乎无法将 jQuery 与 Prototype 分开。

我已经使用更改的标签等在 JsFiddle 上运行它，但是当我将它添加到我的 magento 网站时，我不断收到未捕获的语法错误。

页面位于http://www.asg.co.uk/gadgetclinic/how-it-works

我正在使用的代码是：

<script type="text/javascript">
// First hide them all

$j("#how-it-works .step").hide();

function fades($j.step) {    
    $j div.fadeIn(300, function () {
            if (!$j div.is('last-child')) {
                fades($div.next());
            }
            else{
                fades($j("#how-it-works .step:first-child"));
            }
    });
}

fades($("#how-it-works .step:first-child"));
</script>

HTML 代码是：

<div id="how-it-works">
<img src="{{skin url="images/how-it-works.png"}}" alt="How It Works" />
<div class="step"><h3>Get your box</h3><p>We'll send a suitably sized, pre-paid postage box for your device.</p></div>
<div class="step"><h3>Post your device</h3><p>Safely pack your device in your postage box and return it to us.</p></div>
<div class="step"><h3>Repair in process</h3><p>We will update you if need be whilst your device is repaired.</p></div>
<div class="step"><h3>Get your device</h3><p>Your device will be returned using the service you selected.</p></div>
</div>

谁能帮助我系统地帮助将所有必需的 $ 标签放入 $j 或将 jQuery 与 Prototype 分开所需的任何东西？

Answer 1

1. 打开您的 jquery.x.x.x.js 文件并将其添加到文件的最底部：jQuery.noConflict();

2. 然后对于您的自定义 jQuery 代码，使用以下代码：

   jQuery(function($){
   // Use jQuery with $(...)
   
       $('#mySelector').hide();
   
       /* your jquery code....*/
   
   });
   

这就是我使用 Magento 实现 jQuery 的方式。我更喜欢将$ 用于jQuery 实例，因为它干净且熟悉。上面的代码包装器允许您这样做。

Answer 2

通常使用 jQuery no conflict

编辑 所以对你来说最好的方法是使用 noconflict + (函数 ($j) { ... // 你的代码在这里 }(jQuery));

Edit2 3个例子如何使用它

1

var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.

$j(document).ready(function() {
    // you can keep using $j
    $j( "div" ).hide();
});

2

jQuery.noConflict();

jQuery( document ).ready(function( $ ) {
    // You can use the locally-scoped $ in here as an alias to jQuery.
    // or change $ above to $j
    $( "div" ).hide();
});

3

jQuery.noConflict();

(function( $ ) {
    // Your jQuery code here, using the $
    // or just chane $ to $j if you want
})( jQuery );

Answer 3

我设法使用以下方法使其工作：

 jQuery.noConflict();

jQuery( document ).ready(function( $ ) {
// You can use the locally-scoped $ in here as an alias to jQuery.
// or change $ above to $j
$( "#how-it-works .step" ).hide();

$('.step').each(function( index ) {
$(this).delay( index * 700 ).fadeIn();
});
});

这里有几个帖子的组合。似乎真的很简单和轻量级。感谢大家的帮助！

Answer 4

好的，我找到了一种方法，可以让原型、jQuery 和引导程序工作而不会相互干扰，也不需要使用jQuery.noConflict()。我的布局设置 (page.xml) 如下（为了便于阅读而删除）：

<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>scriptaculous/builder.js</script></action>
    <action method="addJs"><script>scriptaculous/effects.js</script></action>
    <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
    <action method="addJs"><script>scriptaculous/controls.js</script></action>
    <action method="addJs"><script>scriptaculous/slider.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>
    <action method="addJs"><script>varien/form.js</script></action>
    <action method="addJs"><script>varien/menu.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>mage/cookies.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
    <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
</block>

我收到如下错误：

TypeError: element.attachEvent 不是函数

element.attachEvent("on" + actualEventName, responder);

TypeError: element.dispatchEvent 不是函数

element.dispatchEvent(event);

我不想到处更改$。所以，我制作了三个javascript文件如下：

proto_to_temp.js 具有以下代码：

var $tempPrototypeDollar = $;

after_jquery.js 具有以下代码：

$ = jQuery;

after_all.js 有以下代码：

$  = $tempPrototypeDollar;

您可能已经猜到了，第一个脚本将当前的$ 变量（由原型拥有）分配给一个名为$tempPrototypeDollar 的临时变量。第二个脚本只是将jQuery 分配给$。第三个脚本将$tempPrototypeDollar 的内容分配回$。

我按以下顺序包含这三个脚本：

<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>scriptaculous/builder.js</script></action>
    <action method="addJs"><script>scriptaculous/effects.js</script></action>
    <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
    <action method="addJs"><script>scriptaculous/controls.js</script></action>
    <action method="addJs"><script>scriptaculous/slider.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>
    <action method="addJs"><script>varien/form.js</script></action>
    <action method="addJs"><script>varien/menu.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>mage/cookies.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/proto_to_temp.js</script></action><!-- First Script goes just before jQuery include-->
    <action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_jquery.js</script></action><!-- Second Script goes just after jQuery include-->
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
    <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_all.js</script></action><!-- Third Script goes after all related code has been included -->
</block>

这为我解决了所有问题，现在 jquery、bootstrap 和原型都可以正常工作。