include() non funziona su tutti i browser

Question

proprio qui è un blocco del mio codice. Funziona perfettamente in fireFox e Chrome. Ma non in IE. Ottengo l'errore "Object doesn't support property or method 'includes'"

function rightTreeSwapfunc2() { 
    if ($(".right-tree").css("background-image").includes("stage1") == true) { 
     $(".right-tree").css({ 
      backgroundImage: "url(/plant-breeding/img/scenes/plant-breeding/stage5.jpg)" 
     }) 
    } else { 
     $(".right-tree").css({ 
      backgroundImage: "url(/plant-breeding/img/scenes/plant-breeding/stage3.jpg)" 
     }) 
    } 
} 

ho potuto cambiare un po 'e utilizzare la vaniglia JS e fare:

document.getElementById("right-tree").classList.contains

Ma preferirei vedere se c'è un modo per farlo lavorare in IE prima di cambiare il JS e modificare HTML e CSS.

Answer 1

Se si guarda la documentazione di includes(), la maggior parte dei browser non supporta questa proprietà.

È possibile utilizzare ampiamente supportato indexOf() dopo la conversione la proprietà di stringa utilizzando toString():

if ($(".right-tree").css("background-image").indexOf("stage1") > -1) { 
//           ^^^^^^^^^^^^^^^^^^^^^^ 

È anche possibile utilizzare la polyfill da MDN.

if (!String.prototype.includes) { 
    String.prototype.includes = function() { 
     'use strict'; 
     return String.prototype.indexOf.apply(this, arguments) !== -1; 
    }; 
} 

Answer 2

IE11 implementa String.prototype.include quindi perché non utilizzare Polyfill ufficiale?

Fonte:. ". Destro-tree "polyfill source

if (!String.prototype.includes) { 
    String.prototype.includes = function(search, start) { 
     if (typeof start !== 'number') { 
     start = 0; 
     } 

     if (start + search.length > this.length) { 
     return false; 
     } else { 
     return this.indexOf(search, start) !== -1; 
     } 
    }; 
    } 

Answer 3

Un'altra soluzione è quella di utilizzare contiene che restituirà vero o falso

_.contains ($() CSS (" background-image "), "stage1")

Spero che questo aiuti