JavascriptはjQuery v1.11以下と互換性がありません

Question

ページの特定の領域に白黒の色を反転させる小さなスクリプトを作成したいと思います。 http://jsfiddle.net/yQe9t/87/

これはjQuery 1.12.1以上でうまく動作しますが、Iveはいくつかのスレッドにはうまく動作しますが、私は別のスレッドで見つけた反転スクリプトを使用して、私がまだjQuery 1.9を使用しているImのページの何らかの理由で、スクリプトはそこで正しく動作しません。 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

2つのjQueryのバージョンでmapのソースが異なっています。

プロパティ.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にアクセスすると、例外がスローされます。

あなたが自分自身をアップグレードできない場合、oldColorStr.match (/\((\d+),\s?(\d+),\s?(\d+)\)/);がnullを返さない場合は、値をマップに渡すだけです。それは例外を止めるでしょう。

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

あなたはいつも戻って、あなたがこれらの関数に送るコードからマッチング配列を得ることはありません、あなたがなしでnullまたは何かを渡すとき$ .MAPは失敗します。それを修正

Working fiddle

Answer 2

バージョン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) 
?