在操作DOM时无法使对象方法工作

Cannot get object methods work when manipulating DOM

本文关键字：对象 方法 工作 操作 DOM      更新时间：2023-09-26

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

我使用Jquery UI来构建模态对话框。当谈到库存时，我有2个主要对话框:一个显示角色细节，一个显示玩家访问城市的细节。这两个对话框都包含具有不同id但class = "bagpack"相同的div。我们的目标是通过在不使用div id的情况下按类别处理div并操纵它们来反映玩家背包中的当前物品(节省一些代码并增加更多灵活性)。

当涉及到库存项目时，我有对象构造器并通过.push(新剑)将元素推入相关的库存数组。每个项目都有一些方法，即单击，鼠标悬停，鼠标离开-这对于我面临的问题至关重要。

所以，当用户打开城市对话框或角色细节对话框时，gameConfig.inventory.draw('bagpack')会被调用，div .bagpack会根据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

        }

    }

}

结果是:

  1. 我得到项目div(背景图像，颜色等)显示在两个模态对话框，没有问题围绕这个
  2. 现在，当涉及到方法时，我面临奇怪的行为。在一个模态对话框中，方法正在工作，而在另一个模态对话框中遇到以下错误:Uncaught TypeError: Cannot read property ' mouselleft ' of undefined

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

多亏了Clayton Smith，问题才得以解决。

我做了一个蹩脚的方式存储在。obj，现在使用一个适当的方式。下面的代码解决了这个问题:

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

对象的方法现在可以在DOM

中的多个位置正确处理
相关文章：