2013-10-17 205 views
1

我完全卡住的東西,可能是很基本的:布爾變量基於對象屬性

我使用一個構造函數來創建一些遊戲道具:

function itemCreator(itemName, itemType, itemPosition) { 
      this.itemName = itemName; 
      this.itemType = itemType; 
      this.itemPosition =itemPosition; 
} 

new itemCreator('shootUp001', 'item_up', 108); 

new itemCreator('shootLeft001', 'item_left', 608); 

new itemCreator('shootLeft002', 'item_left', 40); 

後來我指定對於類似的商品圖片:

function assignImages(item){ 
    itemObject =item; 
    itemType = itemObject.itemType; 
    var itemDiv = document.getElementById(itemType); //get the div that has the name of this item 
    itemDiv.innerHTML = '<img src="' +itemType +'.png"/><span class="x">x</span><span id="' +itemType +'SpanCount"></span>' //put the picture of this item in there and also a span for the counting 
} 

這裏就是我堅持:

我怎麼能CREA te是我第一次插入某個itemType的圖像時設置爲「true」的布爾變量嗎?我需要這個來避免兩次插入相同類型的圖像。

我知道我可以做一個簡單的dom查找,但我試圖學習JavaScript,並想了解如何能夠避免在這種情況下。

那麼當assignImage傳遞一個匹配itemType的對象時,基於itemType創建變量並修改該變量的智能方法是什麼?

回答

1

我將您的類itemType重命名爲Item,只是遵循標準的JavaScript約定,我們用大寫字母命名我們的類以啓動名稱。下面是我將如何跟蹤已經使用一個簡單的字典創建的itemtypes:

var images = {};//keeping track of images by item types so far 

function assignImages(item){ 
    var type = item.itemType 
    if(!images.hasOwnProperty(type)) { 
     var itemDiv = document.getElementById(type); //get the div that has the name of this item 
     itemDiv.innerHTML = '<img src="' +type +'.png"/><span class="x">x</span><span id="' +type +'SpanCount"></span>' //put the picture of this item in there and also a span for the counting 
     images[type] = itemDiv; 
    } else { 
     console.warn("A image of item type %s already exists", type); 
    } 
} 
+0

我沒有看到你實際修改'items'的地方? – Pavlo

+0

@Pavlo在Item類的第5行 - 我將項目實例分配給item中的itemType。 – megawac

+0

以下是問題所在:如果我正確讀取了代碼,則只有在具有相同itemType的項目不存在時纔會創建屬性。但是我需要所有的項目,不管它們是否具有相同的itemType。我只需要爲每個itemType分配一次圖像。 –

0

而不是分配圖像的項目,你應該做的類型。 獲取所有獨特的項目類型,然後將圖像分配給那些。

function itemCreator(itemName, itemType, itemPosition) { 
      this.itemName = itemName; 
      this.itemType = itemType; 
      this.itemPosition =itemPosition; 
} 

function assignImages(itemType){ 
    var itemDiv = document.getElementById(itemType); 
    itemDiv.innerHTML = '<img src="' +itemType +'.png"/><span class="x">x</span><span id="' +itemType +'SpanCount"></span>' 
} 

var list = [ 
    new itemCreator('shootUp001', 'item_up', 108), 
    new itemCreator('shootLeft001', 'item_left', 608), 
    new itemCreator('shootLeft002', 'item_left', 40) 
]; 

var unique_types = list.map(function(i) { 
     return i.itemType; 
    }).reduce(function(p, c) { 
     if (p.indexOf(c) < 0) p.push(c); 
     return p; 
    }, []); 

unique_types.forEach(function(itemType){ 
    assignImages(itemType); 
}); 
+0

Ouch,我相信這是一個體面的解決方案,但unique_types函數是對我目前的理解說話:/ –