this.property 未定义：无法读取未定义的属性 'classList'

Question

我正在做一些事情来可视化照片。
目标是 select 您想要的图片在 "list" 中显示在主 HTML 元素上。但是为了帮助您找到您在列表中的位置，class 在您 select 编辑的元素上添加了边框。

问题：
使用事件 this.block.onclick = function () 执行的函数开始良好，.selected 从初始 selected 元素中删除，但是当出现 this.block.classList.add('selected'); 时，我收到此错误：

media_visu.js:26 Uncaught TypeError: Cannot read property 'classList' of undefined

我试着把 function 放在外面，试过 className、setAttribute，但没有任何改变：我的 this.block 似乎是 undefined。

mediavisu.js :

var mediaVisu = function () {
    'use strict';

    window.console.log('mediaVisu loaded');




    var i,
    visu = document.querySelector("#img"),
    Album = [];

    function Photo(nb, folder) {
        this.block = document.querySelector("#list_img_" + nb);
        this.place = 'url(../src/' + folder + '/' + nb + '.jpg)';
        this.block.onclick = function () {
            for (i = 0; i < Album.length; i += 1) {
                window.console.log(Album[i].block);
                if (Album[i].block.classList.contains('selected')) {
                    Album[i].block.classList.remove('selected');
                }
            }
            visu.style.background = this.place;
            window.console.log(visu.style.background);
            window.console.log(this.place);
            this.block.classList.add('selected');
        };
        Album[Album.length] = this;
    }

    var test_a = new Photo(1, "test"),
    test_b = new Photo(2, "test"),
    test_c = new Photo(3, "test"),
    test_d = new Photo(4, "test"),
    test_e = new Photo(5, "test");

    window.console.log(Album);
    for (i = 0; i < Album.length; i += 1) {
        window.console.log(Album[i]);
    }
};

Answer 1

在onclick函数中，this将是被点击的元素

所以你可以简单地使用

this.classList.add('selected');

您可能需要重新考虑使用 this.place，因为 this 不会是您认为的 this。一个常见的解决方案如下

function Photo(nb, folder) {
    this.block = document.querySelector("#list_img_" + nb);
    this.place = 'url(../src/' + folder + '/' + nb + '.jpg)';
    var self = this;
    this.block.onclick = function () {
        for (i = 0; i < Album.length; i += 1) {
            window.console.log(Album[i].block);
            if (Album[i].block.classList.contains('selected')) {
                Album[i].block.classList.remove('selected');
            }
        }
        visu.style.background = self.place;
        window.console.log(visu.style.background);
        window.console.log(self.place);
        this.classList.add('selected');
    };
    Album[Album.length] = this;
}

或者，使用绑定

function Photo(nb, folder) {
    this.block = document.querySelector("#list_img_" + nb);
    this.place = 'url(../src/' + folder + '/' + nb + '.jpg)';
    this.block.onclick = function () {
        for (i = 0; i < Album.length; i += 1) {
            window.console.log(Album[i].block);
            if (Album[i].block.classList.contains('selected')) {
                Album[i].block.classList.remove('selected');
            }
        }
        visu.style.background = this.place;
        window.console.log(visu.style.background);
        window.console.log(this.place);
        this.block.classList.add('selected');
    }.bind(this);
    Album[Album.length] = this;
}

注意：现在您回到 this.block.classList.add('selected')，因为 this 现在是您之前期望的 this

Answer 2

您可以使用 'this'（如上一个答案中所述）或使用事件目标访问它：

    this.block.onclick = function (e) {
        for (i = 0; i < Album.length; i += 1) {
            window.console.log(Album[i].block);
            if (Album[i].block.classList.contains('selected')) {
                Album[i].block.classList.remove('selected');
            }
        }
        visu.style.background = this.place;
        window.console.log(visu.style.background);
        window.console.log(this.place);
        e.target.classList.add('selected');
    };

this.property 未定义：无法读取未定义的属性 'classList'

this.property is undefined: Cannot read property 'classList' of undefined

javascript

oop

class

this

undefined

this.property 未定义：无法读取未定义的 属性 'classList'

this.property is undefined: Cannot read property 'classList' of undefined

javascript

oop

class

this

undefined

this.property 未定义：无法读取未定义的属性 'classList'