Question

我正在使用Javascript / jQuery构建一个面向对象的连接四个游戏，用于作业。该板是使用一系列“芯片”对象构建的。我循环遍历数组并为每个对象动态创建一个div并将对象附加到div。每个div上都有一个click事件，因此当玩家点击'square'时会触发事件。我需要能够在触发此事件时访问每个对象属性值，但无法弄清楚如何执行此操作。我检查了 - ＆gt; this＆lt; - 回答，但它对我不起作用，因为每个对象都没有要引用的名称，只有它所在的div有几个类，具体取决于它的状态。我将如何获得它的价值？

这是我的board对象中的代码，它创建了芯片对象数组，它是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);
            }
        }

...它只能在本地访问（在该函数体内）。为了在您的处理程序中访问变量，您可以将它添加到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问题。

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

2 个答案: