1

我正在使用 Magento，我厌倦了它的内置原型 #%@$！！我有“ Pre-Select Colors Plus Swatches ”扩展，我也很生气，因为它没有在页面加载时预先选择产品颜色属性。我也花了几个小时试图让 jQuery noConflict() 工作，但它完全崩溃了前面提到的扩展。所以我最终得到了那个 jQuery 代码，并且需要将它翻译成 Prototype，这似乎是不可能的！此函数模拟单击第一个可用颜色选项，并在页面加载后调用它。原型可以吗？如何 ？？？

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

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

4

3 回答 3

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

这应该.click();和 jQuery 做的差不多

于 2012-07-18T13:11:56.590 回答
0

好吧，我最终得到了一个 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');

});
于 2012-07-31T20:23:16.060 回答
0

如果我不理解你的问题，在原型 js 中使用 $$ 应该可以解决这个问题。Prototype 还支持伪类，例如 not, nth, first。你可以看看这里。

于 2012-07-31T06:39:41.300 回答