Frage an z-index, css, append, jquery – JQuery: Wie werden Bilder übereinander gelegt?

1

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

            }

        }

    });

});
Es ist nicht ganz klar, was Sie fragen. Wenn Sie "aneinander anhängen" sagen, was meinen Sie dann? lucuma
Ich habe Ihren Code gefummelt, um zu sehen, ob ich Ihre Absicht erfassen konnte:jsfiddle.net/CJ62j - Ich bin mir aber immer noch nicht sicher, was Siewollen erreichen? Bitte erläutern Sie, was und wo getan werden soll. SpaceBison
Wollen Sie damit sagen, dass Sie Bilder übereinander legen möchten, damit Sie verschiedenfarbige Detailbilder auf ein Basishemdbild setzen können? RustyTheBoyRobot
Ja, genau, übereinander schichten ist das, was ich meine. Stefan Schneider
Ok, also in der Jsfiddle: Wenn Sie zum Beispiel die Körperfarbe Blau auswählen, wird der Körper eines Hemdes angezeigt. Wenn Sie später die Körpernaht einfarbig und dann blau auswählen, wird das ursprüngliche Körperbild ersetzt. Es sollte es jedoch hinzufügen. Die Bilder sind alle pngs und passen perfekt aufeinander. Gleiches gilt für die Preisinformationen im Preisfeld div. Jetzt wird es ersetzt, aber es sollte hinzugefügt werden. Stefan Schneider

Deine Antwort

2   die antwort
1

Zuerst müssen Sie entscheiden, in welcher Reihenfolge Ihre Bilder angezeigt werden sollen. Aus Ihrem Code würde ich beispielsweise entnehmen, dass Sie zwei Ebenen haben (Sie können bei Bedarf weitere Ebenen hinzufügen):

BaseBody Stitching

Zweitens ordnen Sie jede Ebene einem Z-Index zu und erstellen Sie<div> Elemente für jeden. Diese<div>'s sollten so gestaltet sein, dass ihre Positionierung absolut ist, wie folgt:

<div id="baseImage" style="z-index:1; position: absolute;"></div>
<div id="stitchImage" style="z-index:2; position: absolute;"></div>
...

Ich würde wahrscheinlich auch die Breite / Höhe von jedem angeben<div> passend zu Ihren Bildern.

Verwenden Sie zum Schluss jQuery, um die einzelnen Elemente zu positionieren<div> oben auf dem Basisbild.

$("#stitchImage").offset($("#baseImage").offset());

Wenn Sie dann Bilder ersetzen müssen, verwenden Sie einfach den Code, den Sie haben:

$("#stitchImage").html("<img src='" + src + "' />");

Beachten Sie, dass Sie ein leeres Platzhalterbild verwenden müssen, damit Benutzer niedrigere Ebenen sehen können, wenn sie noch keine höheren Ebenen ausgewählt haben.

Danke, das hat den Job gemacht. Stefan Schneider
0

anstelle von:

$('#shirt').html(html);
('#pricefield').html(html);

benutze die.append(...) Methode.

$('#shirt').append(html);
('#pricefield').append(html);

jQuery .append ()

Dadurch werden die Bilder in den Abschnitten angehängt. Welches ist nicht die Absicht. Innerhalb der Abschnitte sollten die Bilder ersetzt werden, aber die Abschnitte selbst sollten einzeln hinzugefügt werden. Sie wählen also die Farbe eines T-Shirt-Körpers aus und fügen dann eine Stickfarbe usw. hinzu. Stefan Schneider
Das gipfelt in:jsfiddle.net/CJ62j/1 - Was, wenn es benutzt wird, nicht richtig aussieht. Denken Sie nicht, dass dies die Absicht ist. SpaceBison
ah ok, deine frage wurde falsch verstanden. CoryDorning

Verwandte Fragen