Question

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

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

当涉及到库存物品时，我通过.push（新剑）将对象构造函数和推送元素放入相关的库存数组中。每个项目都有一些方法，即点击，鼠标悬停，鼠标移除 - 这对我面临的问题至关重要。

因此，当用户打开城市对话框或角色详细信息对话框时，将调用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（背景图像，颜色等），没有问题
现在，谈到方法，我面临着奇怪的行为。似乎在一个模态对话框中方法正在工作，而在另一个模态对话框中遇到以下错误：未捕获的TypeError：无法读取未定义的属性'mouseLeft'

我不完全理解发生了什么，为什么在一种情况下，在数组中找到的对象处理正常，在另一种情况下，他们的方法会丢失。

Answer 1

感谢Clayton Smith解决了问题。

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

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

});

现在，在DOM

中的多个位置正确处理对象的方法

在操作DOM

1 个答案: