替换为另一个

Question

现有的JavaScript元素我能做些什么： 我有对象的数组，当用户点击一个名字，图像会出现，当用户点击该图像中点击的次数将会呈现。

我不能做什么： 当另一名用户点击，现有的图像和点击数应更换为最近点击一个。你能帮我实现吗？上的所有图像无，然后显示：

var myArray = []; 
myArray[0]= {name: "Mel", img : "img/ml.jpg", clicks : 0}; 
myArray[1]= {name: "Ang", img : "img/ma.jpg", clicks : 0}; 
myArray[2]= {name: "Cam", img : "img/mk.jpg", clicks : 0}; 
myArray[3]= {name: "Val", img : "img/vs.jpg", clicks : 0}; 
myArray[4]= {name: "Gab", img : "img/ga.jpg", clicks : 0}; 

let elemName=[]; 
let elemImg=[]; 
let elemClick=[]; 

for (let i = 0; i < myArray.length; i++) {  //create elements 
    elemName[i] = document.createElement("h2"); 
    elemName[i].textContent = myArray[i].name; 
    elemImg[i] = document.createElement("img"); 
    elemImg[i].src = myArray[i].img; 
    elemClick[i] = document.createElement("h3"); 
    elemClick[i].textContent = myArray[i].clicks; 

elemImg[i].onclick=function(){     //count clicks 
    myArray[i].clicks++; 
    elemClick[i].textContent = myArray[i].clicks; 
}; 

document.body.appendChild(elemName[i]); //Show names 

elemName[i].onclick=function(){  //When a name is clicked, display image and number of clicks, replacing the existing one 

    //???????????????? 

    document.body.appendChild(elemImg[i]); 
    document.body.appendChild(elemClick[i]); 
}; 

Answer 1

• 与display: none创建所有图像开始
• 当点击一个名称，使用显示块;或显示：内联;在您想要显示的图像上
• 创建一个DIV并使用CSS zScore : 1来显示所有内容。把你的计数在这个DIV。你也可能需要使用CSS position: relative或position:absolute放置DIV在正确的地方