Question

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

我已经使用更改的标签等工作在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

打开 jquery.x.x.x.js 文件，并将其添加到最底层：jQuery.noConflict();

然后，对于您的自定义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和bootstrap，而不会相互干扰而不使用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（＆＃34; on＆＃34; + actualEventName，responder）;

TypeError：element.dispatchEvent不是函数

element.dispatchEvent（事件）;

我不想在任何地方更改$。所以，我制作了三个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和prototype，似乎一切正常。

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

4 个答案: