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

Question

我正在尝试实现一个功能：

1. 在左侧显示项目列表
2. 动态选择器循环每个项目（下图中的虚线矩形）
3. 在右侧应该显示带有选择器的项目的图像
4. 将从存储中提取项目的名称和图像

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

如果能推荐任何相关资源会很有帮助。

Answer 1

您可以使用此代码。将 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>

您可以将 ListImg 中的文本替换为您的图片网址