javascript - jquery onclick 显示图像

Question

我有一车图像，我想在单击时将其一一显示在包中(单击前两个)。看来我使用的脚本只适用于一个图像，而不是一系列图像。有没有更简单的方法来创建这种效果？

<script type="text/javascript">
function show_image()
{
      var img = document.createElement("img");
    document.getElementById("shampoo").style.display="block";  


}
</script>

<script type="text/javascript">
function show_image()
{


    document.getElementById("spray2").style.display="block";  

}
</script>

HTML

<div class="clearfix" id="page">
<div class="title"><img src="assets/yourbag.png" width="296" height="112" alt=""/></div>
<div class="bag"><img src="assets/bag.png" width="472" height="285" alt=""/></div> 
<div class="leftpocket"><img src="assets/pocket_left.png" width="209" height="159" alt=""/></div>
<div class="rightpocket"><img src="assets/pocket_right.png" width="209" height="155" alt=""/></div>
 <div id="shampoo" style="display:none"><img src="assets/bottle.png" width="86" height="206" alt="" id="shampoo"/></div>



<div class="product1">  <input type="button" name="show" id="show" onclick="show_image()"  /></div>
 <div id="spray2" style="display:none"><img src="assets/spraycan.png" width="86" height="206" alt="" id="spray2"/></div>

<div class="product2"> <input type="button" name="spray" id="spray" onclick="show_image()"  /></div>
<div class="product3"><img src="assets/tissues.png" width="73" height="97" alt=""/></div>
<div class="product4"><img src="assets/tp.png" width="90" height="105" alt=""/></div>

<div class="product5"><img src="assets/detergent.png" width="61" height="120" alt=""/></div>
<div class="product6"><img src="assets/laundrypods.png" width="124" height="83" alt=""/></div>
<div class="product7"><img src="assets/sunscreen.png" width="58" height="127" alt=""/></div>
<div class="product8"><img src="assets/babyshapoo.png" width="51" height="119" alt=""/></div>

<div class="product9"><img src="assets/diapers.png" width="74" height="115" alt=""/></div>
<div class="more"></div>
<div class="trade"></div>

Answer 1

这就是你想要做的吗？ http://jsfiddle.net/BwjQj/4/

蓝色部分是你的“包”。

添加您的<img>进入<div>和类(class)一起item它应该工作正常。您是否也希望能够将它们从购物车中删除？