Script error only in ie10 / works perfect in all o

2019-08-31 17:54发布

问题:

I use the following script to replace dropdowns into regular links. This works perfectly in firefox, chrome, safari and ie11 but does not work in ie10 and below.

The script:

function replaceDropDowns() {
jQuery('.product_attribute_option_link').remove();
jQuery('#selected_combination').text('');
jQuery(".super-attribute-select").each(function() {
    var drop_down = jQuery(this);
    drop_down.hide();
    drop_down.find("option[value!='']").each(function() {
        var option = jQuery(this);
        jQuery("<a>", { 
                text: option.text(),
                href: '#',
                class: 'product_attribute_option_link '+ option.text() +'',
                'data-id': drop_down.attr('id'),
                'data-name': drop_down.attr('name'),
                'data-value': option.val(),
                'data-label': option.text(),
                click: function() { 
                    drop_down.val(option.val());
                    var obj = drop_down.get();
                    Event.observe(obj[0],'change',function(){});
                    fireEvent(obj[0],'change');
                    replaceDropDowns();
                    var selected_combination = [];
                    jQuery(".super-attribute-select").each(function() {
                        if(jQuery(this).val()) {
                            jQuery(".product_attribute_option_link[data-value="+jQuery(this).val()+"]").addClass('product_attribute_option_link_selected');
                            selected_combination.push(jQuery(this).find("option:selected").text());
                        }
                    });
                    jQuery.each(selected_combination, function(index, selection) {
                        jQuery('#selected_combination').append(selection);
                        if(index+1 < selected_combination.length)
                            jQuery('#selected_combination').append(" - ");
                    })
                    return false;
                }
        }).appendTo(drop_down.parent());
    })
});}
jQuery(function() {
replaceDropDowns();})

In ie10 I get the following error: Not defined value in prototype.js on:

var Enumerable = {
each: function(iterator) {
 var index = 0;
 try {
   this._each(function(value) {
     try {
       iterator(value, index++);
     } catch (e) {
       if (e != $continue) throw e; //Exception on throw e
     }
   });
 } catch (e) {
   if (e != $break) throw e;
 }
},

In Firefox everything works fine, no JS error, but in IE I get an error in the .each function saying that an Object was expected.

In my case the replacedropdown function is used so customers can select their sizes. For some webshops these bigger sizes also mean a higher price. Problem is that the price is not updated in ie10 with this script.

Update:

Made some minor changes so this script won't work in ie10. Customers will see the normal dropdown possibilities while in ie10, every one else sees the correct boxes.

回答1:

Why are you mixing jQuery and Prototype? It would be best to go with one or the other.

Also, here is the source of your issue:

                    var obj = drop_down.get();
                    Event.observe(obj[0],'change',function(){});
                    fireEvent(obj[0],'change');

The call to drop_down.get() returns a native DOM node, yet you are using it like a jQuery object. Replace all instances of obj[0] with just obj.