動的セレクタを実装し、私は機能を実装しようとしている対応する画像

Question

を示す：各項目（以下、画像内の破線の長方形）左

動的セレクタループ上のアイテムの

1. 表示リストそれはそれ
2. アイテムの名前と画像上のセレクタを持っているアイテムに画像を表示する必要があり右側に
3. は、ストレージから引き出される

質問：これは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>

あなたは、あなたのコードを投稿することができ、あなたの画像のURL