實現動態選擇，並顯示了相應的圖像

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