jquery onclick Bild anzeigen

Habe ich einen Wagen von Bildern, die möchte ich Ihnen zeigen, eine nach der anderen in die Tasche, wenn Sie geklickt werden (Klicken Sie auf die ersten beiden). Es scheint das Skript, das ich verwende, funktioniert nur mit einem Bild, nicht eine Serie von Bildern. Gibt es einen einfacheren Weg, um diesen Effekt zu erstellen?

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

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

Überprüfen Sie die id der aktuell angeklickte Bild, das Schlüsselwort this.
Ich bin mir nicht sicher, was du meinst? Ich glaube, dass meine id ' s sind korrekt.
Nur um klar zu sein, wenn Sie auf ein Bild, das Sie hinzufügen möchten, auf die geklickt Bild auf die Tasche/Warenkorb-Sache?
Ja, das ist genau das, was ich will, geschehen Azeirah.

InformationsquelleAutor user2711818 | 2013-10-20

1

Ist es das, was Sie zu tun versuchen? http://jsfiddle.net/BwjQj/4/

Dem blauen Bereich ist Ihre "Tasche".

fügen Sie Ihre <img> in die <div>'s mit der Klasse item und es sollte funktionieren. Sie wollen auch in der Lage sein, um Sie zu entfernen aus dem Warenkorb?

Auch wenn ich auf das erste Bild für die zweite scheint zu zeigen, bis so etwas passiert, aber das Skript triggert falsch.
Der Grund, ein Bild zeigt das erste mal ist, weil die div shampoo bereits ein Bild in es. style.display = block macht das div sichtbar. Wenn Sie möchten, um weitere Bilder hinzufügen, um shampoo durch javascript, die Sie brauchen, es zu tun auf diese Weise.
Ich will nicht, um weitere Bilder hinzufügen, um das shampoo div möchte ich ein Bild im Zusammenhang mit der jeweils aktuellen Bildes auf der Seite zu zeigen, wenn auf Sie geklickt wird.
Okay, ich denke ich weiß was du meinst, aber der code, den Sie geschrieben habe, nicht tun. Ich werde zu aktualisieren meinem Beitrag in ein paar Minuten.
Mein post wurde aktualisiert.

InformationsquelleAutor Scott Rowell

Scott Rowell bereits getan haben dies für Sie, aber ich hatte bereits die Entwicklung einer version, wenn ich sah, wie seine Antwort. Sehen Sie, wenn Sie wie meine versuche:

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

Ich habe versucht, diese Methode, und konnte es nicht bekommen, um zu arbeiten. Irgendwelche Gedanken auf, warum? Ich reuploaded zu den original-link
Es funktioniert auf janeucreative.com/daddychallenge/bag.html ?
Es funktionierte für mich in der Geige. Nur nicht, wenn kopieren und einfügen in meinem eigenen code. Ich habe versucht, auf firefox, safari und chrome.
Es scheint das onload-Ereignis funktioniert nicht auf meiner Seite.
die Quelle anzeigen hier, wie ich es geschafft habe: sanbarcomputing.com/flat/forumPosts/src/cart/cart.html Sie können die javascript-Quelldateien mit den debugging-tools in Chrome, Firefox, etc. (F12 im Chrome, dann wird die Quellen"). Wenn ich das Dokument verwenden.onload-Ereignis funktioniert es nicht, aber Fenster.onload funktioniert

InformationsquelleAutor Aeoril

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.