Javascript не совместим с jQuery v1.11 или ниже

Question

Я хочу написать небольшой скрипт для инвертирования черно-белых цветов на определенной области страницы. Я использовал инвертирующий скрипт, который нашел в другом потоке, и настроил его только для инвертирования черно-белого и только на определенной области страницы: http://jsfiddle.net/yQe9t/87/

Это отлично работает на jQuery 1.12.1 и выше, но Ive заметил, что некоторые страниц, в которых Im работает с ними, все еще используют jQuery 1.9, и по какой-то причине скрипт работает неправильно; http://jsfiddle.net/yQe9t/88/ (jquery 1.9 здесь). Я не могу изменить версию jQuery, используемую на этих страницах, поэтому мне нужно сделать ее совместимой с этим.

Может кто-нибудь, пожалуйста, помогите мне выяснить, как заставить мой код работать и с более старыми версиями? Я бы хотел, чтобы он работал над новым и старым, но не знаю достаточно о Javascript, чтобы исправить это.

Мой полный Javascript:

$(".invertAll").click (function() { 
    var Body = $(".unit.size-col-d.width610"); 
    invertElementColors ($(Body)); 
}); 

function rgb2hex(rgb){ 
rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i); 
return (rgb && rgb.length === 4) ? "#" + 
    ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + 
    ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) + 
    ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : ''; 
} 

function invertElementColors (jNode) 
{ 
jNode.children().each(function() { 
    invertElementColors ($(this)); 
}); 

jNode.css ({ 
    'color' :    function (J, oldColor) { 
     return invertRGB_ColorStr (oldColor); 
    }, 
    'background-color' : function (J, oldColor) { 
     return invertRGB_ColorStr (oldColor); 
    } 
}); 
} 

function invertRGB_ColorStr (oldColorStr) 
{ 

// convert color rgb to hex code so we can easily detect colors 
var help = oldColorStr; 
var colorHex = rgb2hex(help); 

// only convert black and white 
    if ((colorHex == '#000000') || (colorHex == '#ffffff')) { 
    //--- Special case 
    if (oldColorStr == 'transparent') oldColorStr = 'rgb(255, 255, 255)'; 

    //--- Color is text in RGB format. EG: rgb(1, 22, 255) 
    var colorArray = oldColorStr.match (/\((\d+),\s?(\d+),\s?(\d+)\)/); 

    var newColorStr = $.map (colorArray, function (byte, J) 
         { 
          if (!J) return null; 

          //--- Invert a decimal byte. 
          return Math.abs (255 - parseInt (byte)); 
         } 
       ).join (','); 

    return 'rgb(' + newColorStr + ')'; 
} else { 
     return oldColorStr; 
} 
} 

Answer 1

Источник для map в версии два Jquery отличается.

Один проверяет, соответствует ли значение вашего сопоставления массиву, прежде чем пытаться получить доступ к свойству .length.

map: function(elems, callback, arg) { 
     var length, value, 
      i = 0, 
      ret = []; 

     // Go through the array, translating each of the items to their new values 
     if (isArrayLike(elems)) { 
      length = elems.length; 

неисправной не делает:

map: function(elems, callback, arg) { 
     var value, 
      i = 0, 
      length = elems.length, 
      isArray = isArraylike(elems), 
      ret = []; 

Так что, когда ваш регулярное выражение не удается, вы передаете карту null доступа свойство .length в нуль вызывает исключение.

Так что, если вы не можете обновить jQuery самостоятельно, передайте значение только на карту, если oldColorStr.match (/\((\d+),\s?(\d+),\s?(\d+)\)/); не возвращает null. Это остановит исключение.

Working fiddle

Answer 2

Fixed его:

var colorArray = oldColorStr.match(/\((\d+),\s?(\d+),\s?(\d+)\)/); 
    colorArray = colorArray || []; 

Вы не всегда получаете массив соответствия обратно из кода вы отправляете в этих функциях и $ .map терпит неудачу, когда вы передаете нуль или что-нибудь еще без длина в версии 1.9 и ниже

jNode.css({ 
    'color': function(J, oldColor) { 
    console.log("J",J,oldColor) 
     return invertRGB_ColorStr(oldColor); 
    }, 
    'background-color': function(J, oldColor) { 
     console.log("J1",J,oldColor) 

     return invertRGB_ColorStr(oldColor); 
    } 

v1.9;

VM244:102 
[h3, context: h3] 
VM244:105 J 0 rgb(0, 0, 0) 
VM244:128 ocs rgb(0, 0, 0) 
VM244:109 J1 0 rgba(0, 0, 0, 0) 
VM244:128 ocs rgba(0, 0, 0, 0) 
VM244:102 
[img.invertAll, context: img.invertAll] 
VM244:105 J 0 rgb(0, 0, 0) 
VM244:128 ocs rgb(0, 0, 0) 
VM244:109 J1 0 rgba(0, 0, 0, 0) 
VM244:128 ocs rgba(0, 0, 0, 0) 
VM244:102 
[div#D1.Payload, context: div#D1.Payload] 
VM244:105 J 0 rgb(0, 0, 0) 
VM244:128 ocs rgb(0, 0, 0) 

v2 +

VM244:102 
[h3, context: h3] 
VM244:105 J 0 rgb(0, 0, 0) 
VM244:128 ocs rgb(0, 0, 0) 
VM244:109 J1 0 rgba(0, 0, 0, 0) 
VM244:128 ocs rgba(0, 0, 0, 0) 
VM244:102 
[img.invertAll, context: img.invertAll] 
VM244:105 J 0 rgb(0, 0, 0) 
VM244:128 ocs rgb(0, 0, 0) 
VM244:109 J1 0 rgba(0, 0, 0, 0) 
VM244:128 ocs rgba(0, 0, 0, 0) 
VM244:102 
[div#D1.Payload, context: div#D1.Payload] 
VM244:105 J 0 rgb(0, 0, 0) 
VM244:128 ocs rgb(0, 0, 0) 
VM244:109 J1 0 rgb(255, 255, 255) 
?