Jquery與原型magento衝突 - 我如何分離？

Question

我似乎無法使用我的Magento網站將Prototype與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？

Answer 1

通常 jQuery no conflict用於

編輯 所以，你最好的辦法是使用noconflict + （函數（$ j）的{ ... //你的代碼在這裏 }（jQuery的））;

EDIT2 3個實施例如何使用它

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

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

jQuery.noConflict(); 

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

Answer 2

1. 打開jquery.xxxjs文件，將其添加到它的最底層：jQuery.noConflict();

2. 然後爲您定製的jQuery代碼，使用以下命令：

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

那是我如何使用Magento實現jQuery。我更喜歡使用$作爲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 is not a function

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

TypeError: element.dispatchEvent is not a function

element.dispatchEvent(event);

我不想改變$無處不在。所以，我提出三點JavaScript文件如下：

proto_to_temp.js having following code:

var $tempPrototypeDollar = $; 

after_jquery.js having following code:

$ = jQuery; 

after_all.js having following code:

$ = $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，引導和原型，都給人以做工精細。