实现动态选择，并显示了相应的图像

Question

我想实现一个功能：

1. 每个项目（虚线框下图中）左侧
2. 动态选择循环项目的显示列表
3. 在右边它应该显示的图像为上有
4. 项目的名字和图像选择一个项目会从存储拉出

问：这是可以用jQuery或其他方法实现的东西吗？

如果可以推荐任何相关资源，它会很有帮助。

Answer 1

您可以使用此代码。用你的id替换id和类名。

var list = ["cat","dog","elephant","lion"]; 
 
var listImg = ["cat","dog","elephant","lion"]; 
 

 
createListPanel(); 
 
function createListPanel() 
 
{ 
 
var parent = $("#displayPanel").find("td").eq(0); 
 
for(var i=0;i<list.length;i++) 
 
{ 
 
parent.append("<div class='list' id="+i+">"+list[i]+"</div>"); 
 
} 
 
$(".list").click(function(){ 
 
$("#detailDisplay").html(listImg[this.id]); 
 
}); 
 
}

.list:hover{ 
 
    background-color: #ffcccc; 
 
} 
 

 
.list{ 
 
    background-color: #ffe6e6; 
 
    width:150px; 
 
} 
 
#displayPanel 
 
{ 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id = "displayPanel"> 
 
<table width="100%"> 
 
<tr><td ></td><td><div id="detailDisplay"></div></td></tr> 
 
</table> 
 
</div>

您可以用图像的URL替换ListImg文本