2012-10-02 70 views
0

我的項目的目標是創建一個匹配的圖片遊戲,其中用戶點擊兩個圖像。在每次點擊圖像後,它將被翻轉到其替代圖像。如果兩張照片匹配,那麼我將刪除 (或隱藏)這兩個圖像。當所有圖片被移除時遊戲結束。JavaScript對象和元素ID

我有一段HTML代碼,如下所示。

<body> 
    <img src = "somepicture.jpg" onclick = "SomeFunction()" id = "pic0"> 
    <img src = "someotherpicture.jpg" onclick = "SomeFunction()" id = "pic1"> 
    ...etc... 
</body> 

我也有JavaScript代碼,它會生成每個元素並給出每個元素的屬性。

每次我生成一個img我想鏈接一個片段對象,我宣佈我自己。 片段對象的想法是能夠存儲成員變量狀態,該成員變量狀態確定圖片是否面朝下(未點擊)或面朝上(選定)。但我不確定如何鏈接每個img元素的id屬性與我創建的片段對象 。或者,如果這甚至是解決這個問題的最好方法....

我正在考慮製作一個Pieces數組。數組的索引應該與img元素的ID屬性的最後一個字符匹配。

例如,piece [10]將映射到document.getElementById(「pic10」)。但我不知道如何實現這一點。

在此先感謝您的意見!

+0

這是作業,是不是 –

+0

不是。我發誓:D我已經從大學畢業了。我只是學習HTML/JavaScript。這是我爲自己提出的一個任務我的目標是最終制作Tetris,這是我在使用Java之前完成的。但我想先從一個simliar開始。 – Rhs

+1

Javascript in college?不,那只是C和Java。當你進入現實世界並意識到即使你剛剛畢業時你也不知道任何當前的技術,你最終會獨自學習JavaScript。 – PherricOxide

回答

0

代替onclick屬性,附加一個「點擊」事件處理程序到你的圖像。事件處理程序將收到一個event object作爲第一個屬性。事件對象的target屬性包含對引發事件的dom元素的引用。因此,您可以通過event.target.id獲得引發活動的圖片的ID。

+0

我可能是錯的,但是這不需要Jquery? – PherricOxide

+0

當然不是。你如何看待JQuery做到這一點? –

0

數組可以包含文本鍵。使用它。

var pieces = []; 
pieces['pic10'] = "active"; 
+0

我認爲這是誤導......你正在給對象'pieces'添加一個名爲'pic10'的屬性,它恰好是一個'array',但它不是數組的一個元素。 http://jsfiddle.net/jbabey/yyTF8/ – jbabey

+0

這是一個簡單的關聯數組,它可能會用於發佈的目的。 –

+0

javascript中的關聯數組是一個對象,而不是數組 - 這就是爲什麼這是誤導。 – jbabey

0

對於一個非常簡單但不是非常優雅的解決方案,您可以從前綴和數組的索引構建id字符串。

對於映射索引我在數組中,

document.getElementById("pic" + i)