Question

我正在与Magento合作，我厌倦了它的内置原型＃％@ $ !! 我有“Pre-Select Colors Plus Swatches”扩展名，我也很生气，因为它在页面加载时没有预先选择产品颜色属性。我也花了几个小时试图让jQuery noConflict（）工作，但它完全崩溃了前面提到的扩展。所以我最终得到了jQuery代码，并且需要将它转换为Prototype，这似乎是不可能的！此功能模拟第一个可用颜色选项的点击，我在页面加载后调用它。原型可以吗？怎么???

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

另外，如果你能想出一个奇迹代码来让jQuery和原型共存，那就太好了。但我做了一些研究并尝试了很多方法来做到这一点......

Answer 1

您应该尝试在任何原型代码之前加载jQuery，然后在其上调用noConflict。也许不要使用$j作为替换变量，而是使用jQuery代替非短路并且碰撞机会非常低。

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

Prototype和jQuery应该能够非常完美地共存，如果你加载jQuery作为第一个，它甚至会在Prototype启动之前从全局命名空间中清除。这样就不会发生冲突。

您不需要jQuery的简称，也不需要包含$

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

在Prototype是一个常见的错误之后，在noConflict模式下加载jQuery会导致冲突，因为jQuery会在再次清除之前填充$，这样在加载过程中就会发生冲突。

如果您仍想触发原型点击：

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

这与jQuery

的.click();大致相同

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');

});

这个jQuery函数可以用原型吗？

3 个答案: