Problème à l'aide de elem.dataset avec IE et JSFiddle

Dans ce JSFiddle j'ai créé sur Chrome, je trouve que c'est pas en mesure de travailler sur IE (je suis sous IE9). Une raison à cela: http://jsfiddle.net/ZSB67/.

var backImage = [
    "http://alm7.wikispaces.com/file/view/RedBackground.bmp/144018347/RedBackground.bmp",
    "http://www.time2man-up.com/wp-content/uploads/2011/07/black-background.jpg",
    "http://1.bp.blogspot.com/--GorNQoEUxg/TfWPyckVeMI/AAAAAAAAAHk/0208KqQf3ds/s1600/yellow_background.jpg",
    ""
    ];

function changeBGImage(whichImage) {
    if (document.body) {
        document.body.style.background = "url(\"" + backImage[whichImage] + "\")";
    }
}
var buttons = document.querySelectorAll('.bg_swap'),
    button;

for (var i = 0; i < buttons.length; i++) {
    button = buttons[i];
    button.onclick = function() {
        changeBGImage(this.dataset.index);
    };
}
  • J'ai quatre des hyperliens avec une classe de .bg_swap et un index (données de l'index) de nombres dans l'ordre croissant. Quand je clique sur eux, ils sont censés définir l'arrière-plan de la page correspondant à l'index de l'élément à l'index du tableau (backImage). Je suis en Chrome et vérifié sur IE9 et ça ne fonctionne pas.
  • this.dataset s'affiche comme indéfini dans IE9, de sorte que votre gestionnaire onclick jamais l'appelle même le changeBGImage()
InformationsquelleAutor 0x499602D2 | 2011-08-19
  1. 101

    IE < 10 ne prend pas en charge elem.dataset. Vous devez explicitement obtenir l'attribut: http://jsfiddle.net/ZSB67/1/.

    changeBGImage(this.getAttribute('data-index'));

    Dans l'avenir, vous pouvez appuyer sur la touche F12 et en regardant la console d'erreurs, car il dit ce qui en était la cause du problème ici.

    InformationsquelleAutor pimvdb
  2. 9

    this.dataset.index ne fonctionne pas sur IE. Essayez d'utiliser this.getAttribute("data-index").

    InformationsquelleAutor jfriend00
  3. 7

    La raison pour laquelle le dataset propriété n'est pas reconnue par les anciennes versions d'IE (en fait, tous sauf IE11+) est le fait qu'il a été introduit en HTML5 qui ces versions ne prennent pas en charge ou de soutien que partiellement.

    Afin d'obtenir la valeur de cette propriété, on peut l'utiliser pur js comme

    changeBGImage(this.attributes.getNamedItem("data-index").value)

    ou plus simple en utilisant le getAttribute() méthode:

    changeBGImage(this.getAttribute("data-index"))

    ou jQuery (v 1.2.3+):

    $(".bg_swap").click(function(){
    changeBGImage($(this).data("index"));
})
    • Correct. Je ne comprends vraiment pas pourquoi les gens ont la nécessité de soutenir les navigateurs obsolètes, de toute façon. L'utilisation de IE10 et ci-dessous est de max. 6,3% de tous les navigateurs, et ce faible pourcentage d'utilisation comprend Bord et IE11, donc il y a max. (!) 1,4% de vieux IE navigateurs. La rédaction d'un tel compatible code est un gaspillage de temps et d'argent, surtout depuis tous les principaux navigateurs sont gratuits avec mises à jour automatiques gratuites. Enfin, jQuery correctifs de toute façon. Voir: w3schools.com/browsers/browsers_stats.asp
    • C'est dans le cas où votre client n'est pas en mesure / autorisé à installer un navigateur moderne. Par exemple, une institution de l'etat avec des ordinateurs obsolètes.
    • question créée en 2011, ~ à l'époque de soutien peut être nécessaire. 😉
    • Oui, vous avez absolument raison. Je m'ennuie de la date parfois, désolé. 🙂
    InformationsquelleAutor Az.
  4. 4

    dataset semble pas défini dans IE. C'est probablement la principale source de la question. Tout le reste fonctionne parfaitement sur IE9 64 bits.

    Vous pouvez simplement magasin de l'etat localement en JS:

    for (var i = 0; i < buttons.length; i++) 
    register( i )

function register( i ){
    button = buttons[i];
    button.onclick = function() {
        changeBGImage(i);
    };
}

    Ou vous pouvez faire une recherche

    for (var i = 0; i < buttons.length; i++) 
    button = buttons[i];
    button.onclick = function() {
        changeBGImage(this.getAttribute('data-index'));
    };
}
    InformationsquelleAutor cwallenpoole
  5. 0

    Jquery a une data() méthode qui fonctionne aussi dans la Version de IE que j'ai testé (IE8 et IE10).

    Consultez la documentation ici:

    http://api.jquery.com/data/

    InformationsquelleAutor Besi