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

Question

我正在Javascript/jQuery中构建一个面向对象的连接四个游戏，以完成任务。这个板是用一系列的“芯片”物体来建造的。我遍历数组，动态地为每个对象创建一个div，并将对象追加到div。每个div都有一个点击事件，所以当玩家点击一个‘正方形’时，事件就会被触发。当触发此事件时，我需要能够访问每个对象的属性值，但无法确定如何进行。我签出了-> this <-答案，但它对我不起作用，因为每个对象都没有要引用的名称，只有它所在的div，其中有两个类，取决于它的状态。我怎么才能得到它的价值呢？

下面是我的板对象的代码，它创建了芯片对象的数组，它是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
                }
            }   
        }           

    };

下面是用于测试如何获取值的事件处理程序的版本--基于到目前为止所见过的解决方案：

$(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()函数中命名的对象时，如果我将芯片大写(因为它指的是我认为的芯片构造函数)，就会发出警告，说'undefined‘。

任何帮助都是非常感谢的！

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);
            }
        }

..。它将只能在本地访问(在该功能体内)。为了使变量在处理程序中可访问，可以将其添加到board对象(或其他全局对象)中，如下所示：

        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问题。