操作 DOM 时无法使对象方法工作答案

【问题标题】：Cannot get object methods work when manipulating DOM操作 DOM 时无法使对象方法工作
【发布时间】：2015-09-23 10:38:43
【问题描述】：

我正在开发一款 RPG 游戏，作为一种爱好和学习语言的一种方式。现在正在处理库存。

我正在使用 Jquery UI 来构建模式对话框。在库存方面，我有 2 个主要对话框：一个显示角色详细信息，另一个显示玩家访问时的城市详细信息。这两个对话框都包含具有不同 ID 但相同 class= "bagpack" 的 div。目标是通过按类寻址 div 并在不使用 div id 的情况下操作它们来反映玩家包包中的当前项目（节省一些代码并增加更多灵活性）。

当涉及到库存项目时，我有对象构造函数并通过 .push(new Sword) 将元素推送到相关的库存数组中。每个项目都有一些方法，即 click、mousehover、mouseout - 这对于我面临的问题至关重要。

因此，当用户打开城市对话框或角色详细信息对话框时，会调用 gameConfig.inventory.draw('bagpack') 并根据 bagpack 数组中的对象重绘 div .bagpack。 DOM 做了相应的调整，但玩家显然只能在他正在查看的模态对话框中看到效果。

代码如下：

inventory: { //object within an object

    market: [],
    bagpack: [],
    active: [],
    arrows: [], 

    draw: function(inventoryArray, itemType){

    $('.'+inventoryArray).empty();

        gameConfig.inventory[inventoryArray].sort(function(a, b){ //sort array alphabetically
          var nameA=a.name.toLowerCase(), nameB=b.name.toLowerCase()
          if (nameA < nameB) //sort string ascending
              return -1 
              if (nameA > nameB)
                  return 1
                  return 0 //default return value (no sorting)
         });    

        if (itemType === undefined){ //array items will not be filtered
            for(i=0; i<gameConfig.inventory[inventoryArray].length; i++) {
              var item = gameConfig.inventory[inventoryArray][i];
              item.div = $("<div/>");
              item.div.addClass("inventoryItem");
              item.div.css({"background-color": item.backgroundColor});          
              item.div.css({"background-image":"url('"+item.icon+"')"});
              item.div.get(0).obj = item; //link DOM elemnt to an object
                item.div.click(function(){
                  this.obj.clicked();
                });
                item.div.mouseover(function() {
                  this.obj.getInfo();
                });
                item.div.mouseout(function() {
                  this.obj.mouseLeft();
                });

              item.div.appendTo('.'+inventoryArray);
            }


        } else { //array items will be filtered



        }


    }


}

会发生什么：

我在两个模式对话框中都显示了项目 div（背景图像、颜色等），这没有问题
现在，当谈到方法时，我面临着奇怪的行为。似乎在一个模式对话框中方法正在工作，而在另一个模式对话框中遇到以下错误：Uncaught TypeError: Cannot read property 'mouseLeft' of undefined

我不完全明白发生了什么以及为什么在一种情况下在数组中找到的对象处理得很好，而在另一种情况下它们的方法会丢失。

【问题讨论】：

错误表示this.obj 未定义。我建议使用console.log(this) 并检查它以查看发生了什么
@Oriol 实际上，在一种情况下 this.obj 返回一个对象（在方法有效的情况下），在另一种情况下它导致未定义（当方法不起作用时）。那么将 div 链接到对象有问题吗？
在您的开发控制台中检查：gameConfig.inventory[inventoryArray] .. 此外，您可能会发现 item.div.data('obj', item) 更适合将对象链接到元素。
@Clayton Smith：gameConfig.inventory[inventoryArray] 返回一个有效数组。此外，我还绘制了有效的元素（图像、颜色等）。链接显然确实是一个问题。我试过 item.div.data('obj', item);但现在链接在两个模式对话框中都不起作用。我需要以某种方式调整绘图功能吗？
如果你使用data方法，你需要把"this.obj"改成$(this).data('obj').mouseLeft();我不确定这是否会有所帮助。我想知道数组上的长度值是否不正确？如果您正在访问数组中不存在的元素，它将返回未定义。值“i”是否在其他任何地方被修改？尝试将 "for (i=0" 更改为 "for(var i=0"

标签： javascript jquery object dom

【解决方案1】：

感谢 Clayton Smith，问题得以解决。

我在 .obj 中进行了一种糟糕的存储方式，现在使用了正确的方式。这段代码解决了它：

item.div.data('obj', item);
item.div.click(function(){
    $(this).data('obj').clicked();

});

现在可以在 DOM 中的多个位置正确处理对象的方法

【讨论】：