JQuery: Wie werden Bilder übereinander gelegt?

Im folgenden Code habe ich eine Seite, die ein Shirt erstellt. Wenn der Benutzer auf eine Option klickt ("Männlich / Weiblich"), wird im Bereich "#shirt" das erstellte Shirt angezeigt, indem PNG-Bilder übereinander gelegt werden. Wenn Sie beispielsweise die Grundfarbe "Blau" auswählen, wird das Bild eines blauen Hemdes angezeigt. Wenn Sie dann eine Körpernaht mit "gerippt" auswählen, wird ein Bild über dem blauen Hemd platziert, das die gerippten Details hinzufügt. Im Moment besteht mein Problem darin, dass jedes neue Bild das vorherige ersetzt. Alles andere funktioniert einwandfrei (Optionen, die als Reaktion auf zuvor ausgewählte Optionen angezeigt werden).

<div id="gender" class="diy-box">
    Pick Gender<br>
    <input type="radio" name="gender" data-id="" value="male" /><label>Male</label><br>
    <input type="radio" name="gender" data-id="" value="female" /><label>Female</label>

</div>

<section id="displaysection">

    <div id="male" class="desc gender diy-box">

        Pick Body<br>
        <input type="radio" name="male" data-id="105" value="" /><label>Blue</label><br>
        <input type="radio" name="male" data-id="120" value="" /><label>Black</label><br>
        <input type="radio" name="male" data-id="145" value="" /><label>White</label>

    </div>

    <div id="female" class="desc gender diy-box">

        Pick Body<br>
        <input type="radio" name="female" data-id="107" value="" /><label>Blue</label><br>
        <input type="radio" name="female" data-id="211" value="" /><label>Black</label><br>
        <input type="radio" name="female" data-id="212" value="" /><label>Pink</label>

    </div>

</section>

<div id="body_stitching" class="diy-box">

    Body Stitching<br>
    <input type="radio" name="body_stitching" data-id="" value="body_stitching_plain" /><label>Plain</label><br>
    <input type="radio" name="body_stitching" data-id="" value="body_stitching_rib" /><label>Rib</label>

</div>

<section id="displaysection">

    <div id="body_stitching_plain" class="desc body_stitching diy-box">

        Plain<br>
        <input type="radio" name="body_stitching_plain" data-id="324" value="" /><label>Blue</label><br>
        <input type="radio" name="body_stitching_plain" data-id="325" value="" /><label>Red</label>

    </div>

    <div id="body_stitching_rib" class="desc body_stitching diy-box">

        Rib<br>
        <input type="radio" name="body_stitching_rib" data-id="" value="black" /><label>Black</label><br>
        <input type="radio" name="body_stitching_rib" data-id="" value="green" /><label>Green</label>

    </div>

</section>

<div class="clear"></div>

<div id="shirt"></div>

<div id="pricefield" style="float:right"></div>

<script>

$(document).ready(function() {
    $("div.desc").hide();

    var data = {
        "105" : { img: "http://oceandrive.localhost/images/diy-images/105.png", label: "color 1", price: "100" },
        "120" : { img: "http://oceandrive.localhost/images/diy-images/120.png", label: "color 2", price: "110" },
        "145" : { img: "http://oceandrive.localhost/images/diy-images/145.png", label: "color 3", price: "120" },
        "107" : { img: "http://oceandrive.localhost/images/diy-images/107.gif", label: "color 4", price: "130" },
        "211" : { img: "http://oceandrive.localhost/images/diy-images/211.png", label: "color 5", price: "140" },
        "212" : { img: "http://oceandrive.localhost/images/diy-images/212.png", label: "color 6", price: "150" },
        "324" : { img: "http://oceandrive.localhost/images/diy-images/324.png", label: "color 7", price: "160" },
        "325" : { img: "http://oceandrive.localhost/images/diy-images/325.png", label: "color 8", price: "170" },
    };


    $('input[name]').click(function() {


        var value = $(this).val();   // pics the value of the radio button

        if(value=='male' || value=='female') {
            $("div.gender").hide('slow');
            $("div.gender input:radio").removeAttr('checked');
        }

        if(value=='body_stitching_plain' || value=='body_stitching_rib') {
            $("div.body_stitching").hide('slow');
            $("div.body_stitching input:radio").removeAttr('checked');
        }

        $("#" + value).show('slow');  // addresses the div with the radio button value picked



        if(this.checked) {

            //var value = $(this).val();
            var value = $(this).data('id');

            if (data[value] != undefined)
            {

                var html = '';
                html = html + '<img style="z-index:2;" src="'+data[value].img+'"/>';
                $('#shirt').html(html);

                var html = '';
                html = html + '- '+data[value].label+' - '+data[value].price+' NT<br>';
                $('#pricefield').html(html);

            }

        }

    });

});

Antworten auf die Frage(2)

Ihre Antwort auf die Frage