JavaScript數組：交換顯示的內容

Question

我正在創建一個頁面，點擊點擊它爲新數組交換div內容。我不希望div在頁面加載時爲空，然後點擊時顯示某些內容，我希望它從一個數組開始，然後點擊改變到另一個數組。

這裏是我的數組：

（當頁面加載）

var food = [{logo:'img', name:'Pizza'}{logo:'img', name:'French Fries'}]; 

（點擊時）

var clothes = [{logo:'img', name:'T Shirt'}{logo:'img', name:'Black Turtleneck'}]; 

document.getElementById("choice1").innerHTML = food[0]; 
document.getElementById("choice2").innerHTML = food[1]; 

div編號是 「選擇1」 和 「選擇2」

HTML看起來像：

<div class="thumbnail"> 
<img id="choice1" src="" alt="..."> 
<div class="caption"> 
</br> 
<p><a href="#" class="btn btn-default" onclick="choice1Function()" role="button">Select</a> 
</p> 
</div> 
</div> 

你會用什麼做交換？

Answer 1

可以使用this內部函數，它代表被點擊的元素，你也需要從對象屬性要使用food[0].name

var food = [{ 
 
    logo: 'img', 
 
    name: 'Pizza' 
 
}, { 
 
    logo: 'img', 
 
    name: 'French Fries' 
 
}]; 
 

 
function choice1Function(e) { 
 
    e.innerHTML = food[0].name; 
 
} 
 

 
function choice2Function(e) { 
 
    e.innerHTML = food[1].name; 
 
}

<p><a href="#" class="btn btn-default" onclick="choice1Function(this)" role="button">Select</a></p> 
 
<p><a href="#" class="btn btn-default" onclick="choice2Function(this)" role="button">Select</a></p>