Question

我使用类似于javascript的类实例将Tiles添加到我的Tilegame中，如下所示：

for(var i = ... ) {
    var myTile = new Tile();
}

此Tile实例向DOM添加div元素。在Tile类中，它看起来像这样：

function Tile(){
    this.init = function(){
         $( "game" ).append( "<div class='graph'>yo</div>" );
    }
    this.doSomething = function(){
       // I want to call this function from a generic single click listener for the entire game
    }
}

然后，整个游戏都有一个侦听器，用于检查是否单击了整个游戏容器。使用event.target然后我可以检查点击了哪个div。

function containerWasClicked(evt){
   console.log("somebody clicked on " + evt.target);
   // BUT I cannot call evt.target.doSomething(); because the div does not know who created it...
}

现在我知道点击了哪个div，但是如何找到将div附加到dom的Tile实例？我不想单独为每个元素添加一个监听器。

Answer 1

不要自己进行委托工作，只需使用jQuery的内置功能即可。

首先，在创建元素时，将对Tile对象的引用保存为数据：

this.init = function(){
     var graph = $("<div/>", {
       text: "yo",
       "class": "graph",
       data: { "tile": this }
     });
     $( "#game" ).append( graph );
};

现在您可以设置事件处理程序：

$("#game").on("click", ".graph", function() {
  var theGraph = this;
  var tile = $(theGraph).data("tile");
  // ...
  tile.doSomething();
});

通过初始化jQuery“data”映射以获得对Tile实例的引用，您可以稍后使该对象可用。

Answer 2

这确实是一种反模式;但jQuery允许您在元素上设置数据;你可以按如下方式使用它：

function Tile(){
    this.init = function(){
        var $el = $("<div class='graph'>yo</div>");
        $el.data("creator", this);
        $( "game" ).append( $el );
    }
    this.doSomething = function(){
       // I want to call this function from a generic single click listener for the entire game
    }
}

然后再检索它：

var instance = $(evt.target).data("creator");
instance.doSomething();

Answer 3

使用＆＃34;这个＆＃34;将引用被点击的元素。

$('.graph').on("click", function(){
 $(this).hide();
});

Answer 4

您的所有图块都有一个类graph。如果您向该类添加了一个侦听器，那么您可以在回调中使用$(this)来访问您的磁贴，就像这样;

$(function(){
    $(".graph").click(function(){ $(this).remove() });
});

如何获得创建jQuery元素的javascript类？

4 个答案: