1

クリックしたときにバッグに1つずつ表示したい画像のカートがあります（最初の2つをクリックしてください）。私が使用しているスクリプトは、一連の画像ではなく、1 つの画像でのみ機能するようです。この効果を作成する簡単な方法はありますか?

<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>
4

2 に答える 2

1

これはあなたがやろうとしていることですか？http://jsfiddle.net/BwjQj/4/

青い部分があなたの「バッグ」です。

クラスのにあなた<img>を追加すると、正常に動作するはずです。カートからも削除できるようにしますか?<div>item

于 2013-10-20T01:46:31.980 に答える
0

スコット・ローウェルはすでにこれを行っていますが、彼の回答を見たとき、私はすでにバージョンを開発していました。あなたが私の試みが好きかどうか見てください：

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;
}

フィドル

于 2013-10-20T03:25:01.727 に答える