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>添加到item中，它应该可以正常工作。您是否也希望能够将它们从购物车中移除？

Answer 2

斯科特罗威尔已经为你做了这个，但是当我看到他的答案时，我已经开发了一个版本。看看你是否喜欢我的尝试：

HTML：

<div id="bag1" class='bag'></div>
<div class='prods'>
    <img id="prod1" class="prod" src="http://www.sanbarcomputing.com/images/html5-logo.png"></img>
    <img id="prod2" class="prod" src="http://www.sanbarcomputing.com/images/js.jpg"></img>
</div>

JavaScript的：

var prod1Elem = document.getElementById('prod1'),
    prod2Elem = document.getElementById('prod2'),
    bag1Elem = document.getElementById('bag1');

function add() {
    var item = this.cloneNode();
    item.className = item.id + 'Items';
    bag1Elem.appendChild(item);
    item.addEventListener('click', del, false);
}

function del() {
    this.parentNode.removeChild(this);
}

prod1.addEventListener('click', add, false);
prod2.addEventListener('click', add, false);

CSS：

div.prods {
    text-align: center;
}
div.bag {
    text-align: center;
    min-height: 70px;
}
img.prod {
    width: 100px;
    height: 100px;
}
img.prod1Items {
    width: 50px;
    height: 50px;
    margin-left: 5px;
    margin-right: 5px;
}
img.prod2Items {
    width: 50px;
    height: 50px;
    margin-left: 5px;
    margin-right: 5px;
}

FIDDLE

jquery onclick显示图像

2 个答案: