JavaScript Array: Austausch des angezeigten Inhalts

Question

Ich erstelle eine Seite, wo auf klicken es div Inhalt Div für das neue Array. Ich will nicht, dass das div beim Laden der Seite leer ist und dann etwas beim Klicken angezeigt wird. Ich möchte, dass es mit einem Array beginnt und dann beim Klicken auf das andere wechselt.

Hier sind meine Arrays:

(Wenn Seite geladen)

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

(auf Klick)

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

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

Die div-IDs "Auswahl1" und "choice2" sind

Der HTML-Code sieht so aus:

<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> 

Was würden Sie verwenden, um den Swap zu machen?

Answer 1

können Sie this innerhalb Funktion verwenden, das Element darstellt, das geklickt wurde, auch müssen Sie Objekte Objekt auswählen möchten Sie 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>