在Javascript中切換圖片

所以，我是一個新手，我有一個邏輯錯誤，我無法弄清楚。我正在嘗試寫一個頁面來顯示賓果遊戲中的號碼。我有一個16行5列的表格，以容納標題和每個可能的賓果號碼。我希望用戶能夠點擊按鈕並切換顯示所調用號碼的img。這裏有一個片段：在Javascript中切換圖片

<tr> 
    <td><button onclick="toggle('picture')">B-1</button> 
     <div id="picture" style="display:none"><img src="B1.png"/></div></td> 
    <td><button onclick="toggle('picture')">I-16</button> 
     <div id="picture" style="display:none"><img src="I16.png"/></div></td> 
    <td><button onclick="toggle('picture')">N-31</button> 
     <div id="picture" style="display:none"><img src="N31.png"/></div></td> 
</tr>

要切換，我有以下的js代碼：

function toggle(id) { 
    var element = document.getElementById(id); 
    if(element.style.display == "none") 
     show(id); 
    else 
     hide(id);} 

function show(id){ 
    document.getElementById(id).style.display = "block";} 

function hide(id){ 
    document.getElementById(id).style.display = "none";}

所以，不管我點擊了哪個按鈕，切換B1，但nothong人這麼做。我明白問題是（我認爲）我傳遞給函數的是什麼。我通過了什麼，以便該函數只對我用來調用它的按鈕進行操作？

如果有人能幫助我得到正確的代碼，以便它能夠正常工作，那會很好，但如果你能幫我解釋一下，以便我能理解它，那會更好！先謝謝你！

來源

2013-11-24 user3027672

標識** **必須是唯一的。 – j08691

重複ID的===身份盜用DOM對象......他們不喜歡它。此外：不是傳遞ID，而是反覆查詢DOM，爲什麼不傳遞對DOM節點的引用，這會顯着降低開銷 –

謝謝。它工作，甚至更好，我明白了。 – user3027672

ID必須是唯一嘗試這樣的：

<td><button onclick="toggle('B1.png')">B-1</button> 
     <div id="B1.png" style="display:none"><img src="B1.png"/></div></td> 
    <td><button onclick="toggle('I16.png')">I-16</button> 
     <div id="I16.png" style="display:none"><img src="I16.png"/></div></td> 
    <td><button onclick="toggle('N31.png')">N-31</button> 
     <div id="N31.png" style="display:none"><img src="N31.png"/></div></td> 

function toggle(id) { 
    var element = document.getElementById(id); 
    if(element.style.display == "none"){ 
     element.style.display = "block"; 
    }else{ 
     element.style.display = "none"; 
    } 
}

來源

2013-11-24 16:51:03

-1

兩件事情。這些ID必須是唯一的，並且您設置的方式需要將它們傳遞給您的函數。

<tr> 
    <td><button onclick="toggle('picture1')">B-1</button> 
     <div id="picture1" style="display:none"><img src="B1.png"/></div></td> 
    <td><button onclick="toggle('picture2')">I-16</button> 
     <div id="picture2" style="display:none"><img src="I16.png"/></div></td> 
    <td><button onclick="toggle('picture3')">N-31</button> 
     <div id="picture3" style="display:none"><img src="N31.png"/></div></td> 
</tr>

來源

2013-11-24 16:58:50 jm0

你正在傳遞一個變量給函數，但沒有在參數中定義它 – Ani

我沒有讀它的權利，我認爲它是所有相同的HTML元素。當你在js中打開某些東西時，它就有了你單擊的元素的範圍，可以用「this」引用它。如果您要以更模塊化的方式編寫此代碼，則可能會使用該「this」作爲查找其對應圖片的錨點。在小部件設計方面，通常認爲比不必要地傳遞變量更好。 – jm0

試試這個：

http://jsfiddle.net/SPyVB/

<table> 
    <tr> 
    <td><button onclick="toggle('picture1')">B-1</button> 
    <div id="picture1" style="display:none"><img src="B1.png"/></div></td> 
    <td><button onclick="toggle('picture2')">I-16</button> 
    <div id="picture2" style="display:none"><img src="I16.png"/></div></td> 
    <td><button onclick="toggle('picture3')">N-31</button> 
    <div id="picture3" style="display:none"><img src="N31.png"/></div></td> 
    </tr> 
</table>

的javascript：

來源

2013-11-24 17:11:17 Ani

在Javascript中切換圖片

回答

相關問題