javascript - 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 分开所需的任何东西吗？

score 3 · Accepted Answer

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

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

jQuery(function($){
// Use jQuery with $(...)

    $('#mySelector').hide();

    /* your jquery code....*/

});

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

score 1 · Accepted Answer

通常使用 jQuery 没有冲突

编辑所以对你来说最好的方法是使用 noconflict + (function ($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 );

score 0 · Accepted Answer

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

 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();
});
});

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

score 0 · Accepted Answer

好的，我找到了一种让原型、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, 响应者);

TypeError：element.dispatchEvent 不是函数

element.dispatchEvent(事件);

我不想$到处改变。因此，我制作了三个 javascript 文件，如下所示：

proto_to_temp.js具有以下代码：

var $tempPrototypeDollar = $;

after_jquery.js具有以下代码：

$ = jQuery;

after_all.js具有以下代码：

$  = $tempPrototypeDollar;

正如您可能已经猜到的那样，第一个脚本将当前$变量（由原型拥有）分配给名为$tempPrototypeDollar. 第二个脚本只是分配jQuery给$. 第三个脚本将$tempPrototypeDollarback 的内容分配给$.

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

<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 和原型，似乎都工作正常。

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

4 回答 4

Related

Reference