如何从附加到 div 的对象中获取属性值？

Question

我正在用 Javascript/jQuery 构建一个面向对象的连接四游戏，以完成一项任务。该板是使用一组“芯片”对象构建的。我遍历数组并为每个对象动态创建一个 div 并将该对象附加到该 div。每个 div 上都有一个点击事件，因此当玩家点击一个“正方形”时，就会触发该事件。触发此事件时，我需要能够访问每个对象的属性值，但不知道该怎么做。我检查了 -> this

这是我的板对象中创建芯片对象数组的代码，它是 div，并附加它们：

var gameBoard = [
[0, 1, 2, 3, 4, 5, 6],
[0, 1, 2, 3, 4, 5, 6],
[0, 1, 2, 3, 4, 5, 6],
[0, 1, 2, 3, 4, 5, 6],
[0, 1, 2, 3, 4, 5, 6],
[0, 1, 2, 3, 4, 5, 6]
];



    var board = {
        coordinates: [],
        newBoard: [],
        owner: null,

        makeChips: function(){  

            for(var i = 0; i < gameBoard.length; i++){ //iterate array
                var row = gameBoard[i];
                for(var x = 0; x < gameBoard[i].length; x++){ //iterate subarrys
                    var newRow = [];
                    var chip = new Chip(); //make it a chip object
                    chip.coordinates = [i,x]; //assign coordinates for testing win
                    newRow.push(chip);//push chip object into new Board 
                    this.newBoard.push(newRow);
                }
            }
        },

        makeBoard: function(){
            var makeBoard = $("#board"); //grab the board div from the DOM
            for(var i = 0; i < this.newBoard.length; i++){
                var row = this.newBoard[i];
                for(var x = 0; x < row.length; x++){
                        var makeDiv = $("<div>").attr("class", "chip empty"); //make a new div for each chip object
                        makeDiv.append(row[x]); //attach the chip object to a specific div //<---- ?? am i appending the actual object ??
                        makeBoard.append(makeDiv); //append div to board
                }
            }   
        }           

    };

这是我用来测试如何获取值的事件处理程序的版本 - 基于我迄今为止在 SO 上看到的解决方案：

$(function(){
    var start = $("#start");
    var gameBoardDiv = $("#board"); //grab all board divs
    board.makeChips();
    board.makeBoard();


    gameBoardDiv.on("click", ".chip",function(event){
        var target = $(event.target); //returns the div clicked
        var targetData = $(target).data("obj", chip);

        alert(targetData.data("obj").coordinates);



    }); // chips event listener

});

当我引用在 makeChips() 函数中命名的对象时，我在控制台中得到的是一条“芯片未定义”消息，并且如果我将芯片大写，则警告说“未定义”（因为它是指的是我认为的芯片构造函数）。

感谢任何帮助！

Answer 1

chip 是函数局部变量，因此其范围仅限于 makeChips 函数内。如果你想跨函数使用它，那么要么在函数外定义变量，要么在需要的地方将其引用传递给其他函数。

Answer 2

当你最初在这里定义chip时...

        for(var i = 0; i < gameBoard.length; i++){ //iterate array
            var row = gameBoard[i];
            for(var x = 0; x < gameBoard[i].length; x++){ //iterate subarrys
                var newRow = [];
                var chip = new Chip(); //make it a chip object
                chip.coordinates = [i,x]; //assign coordinates for testing win
                newRow.push(chip);//push chip object into new Board 
                this.newBoard.push(newRow);
            }
        }

...它只能在本地访问（在该函数体内）。为了使您的处理程序中的变量可访问，您可以将其添加到板对象（或其他一些全局对象），如下所示：

        for(var i = 0; i < gameBoard.length; i++){ //iterate array
            var row = gameBoard[i];
            for(var x = 0; x < gameBoard[i].length; x++){ //iterate subarrys
                var newRow = [];
                board.chip = new Chip(); //make it a chip object, add it to a global object 
                board.chip.coordinates = [i,x]; //assign coordinates for testing win
                newRow.push(board.chip);//push chip object into new Board 
                this.newBoard.push(newRow);
            }
        }

然后在底部的处理程序中，您应该可以像这样再次访问它：

        var targetData = $(target).data("obj", board.chip);

这至少应该解决您提到的undefined 问题。