這個jQuery函數可能與原型？

Question

我正在和Magento合作，我厭倦了它的內置原型＃％@ $ !! 我有「Pre-Select Colors Plus Swatches」擴展名，我也很生氣，因爲它沒有在頁面加載時預先選擇產品的顏色屬性。 我也花了幾個小時試圖讓jQuery noConflict（）工作，但它崩潰了上述擴展。 所以我結束了那個jQuery代碼的工作，並且需要將它翻譯成Prototype，看起來不可能！此功能模擬點擊第一個可用的顏色選項，並在頁面加載後調用它。原型有可能嗎？怎麼樣 ？？？另外，如果你能想出一個奇蹟代碼來使jQuery和原型共存，這將是很好的。但我做了一些研究，並嘗試了很多方法來做到這一點...

Answer 1

你應該嘗試在任何原型代碼之前加載jQuery，然後在其上調用noConflict。也許不要使用$j作爲替代變量，而是使用jQuery來替代，或者使用或其他非短的東西，並且碰撞機率很低。

//Load jQuery 
<script> 
    var jQuery = jQuery.noConflict(); 
</script> 
//Load other Javascripts including Prototype 

原型和jQuery應該能夠很完美地共存，如果您加載的jQuery作爲第一個將被清除出原型踢甚至在全局命名空間的。這種方式有沒有辦法可以發生衝突。

你不需要jQuery的一個簡短的名稱，它並不需要在noConflict模式$

jQuery("div.atributoProduto.Cor img.swatch:not('.disabledSwatch'):first").parent().click(); 

加載jQuery的原型後，一個常見的錯誤，可能會導致衝突，jQuery將填充$再清除它之前，它可以在加載過程中短暫的衝突。

---

如果你仍然想觸發與原型點擊：

$(myelement).simulate('click'); 

這應該做的一樣.click();做的jQuery

Answer 2

如果我不理解你的問題錯了，在原型js中使用$$應該解決這個問題。 Prototype也支持僞類，比如not，nth，first。你可以看看here。

Answer 3

那麼，我結束了100％的原型解決方案。模擬方法是在互聯網上找到的插件。我最大的問題是原型不像jQuery那樣多鏈接。

Event.simulate = function(element, eventName) { 

     var options = Object.extend({ 
     pointerX: 0, 
     pointerY: 0, 
     button: 0, 
     ctrlKey: false, 
     altKey: false, 
     shiftKey: false, 
     metaKey: false, 
     bubbles: true, 
     cancelable: true 
     }, arguments[2] || { }); 

     var eventMatchers = { 
     'HTMLEvents': /load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll/, 
     'MouseEvents': /click|mousedown|mouseup|mouseover|mousemove|mouseout/ 
     }; 

     var oEvent, eventType = null; 

     for (var name in eventMatchers) { 
     if (eventMatchers[name].test(eventName)) eventType = name; 
     } 

     if (!eventType) throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported'); 

     if (document.createEvent) { 
     oEvent = document.createEvent(eventType); 
     if (eventType == 'HTMLEvents') { 
      oEvent.initEvent(eventName, options.bubbles, options.cancelable); 
     } 
     else { 
      oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView, 
      options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY, 
      options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, $(element)); 
     } 
     $(element).dispatchEvent(oEvent); 
     } 
     else { 
     options.clientX = options.pointerX; 
     options.clientY = options.pointerY; 
     oEvent = Object.extend(document.createEventObject(), options); 
     $(element).fireEvent('on' + eventName, oEvent); 
     } 
} 

function selecionaOnload(atributo){ 
    var elem = $$("div.atributoProduto."+atributo+" img.swatch:not(.disabledSwatch)").first(); 
    Event.simulate(elem, 'click'); 

    if(atributo == 'Cor'){ 
     $$("div.atributoProduto.Tamanho div.ico-esgotado").each(function(elem){ 
      elem.remove(); 
     }); 
     marcaIndisponivel('Tamanho'); 
    } 
} 

function marcaIndisponivel(atributo){ 
    $$("div.atributoProduto."+atributo+" img.swatch.disabledSwatch").each(function(elem){ 
     elem.insert({before:"<div class='ico-esgotado'></div>"}); 
    }); 
} 

Event.observe(window, 'load', function() { 

    //marcaIndisponivel('Cor'); 
    selecionaOnload('Cor'); 
    marcaIndisponivel('Tamanho'); 
    //selecionaOnload('Tamanho'); 

});