Pytanie w sprawie jquery, append, css, z-index – Jquery: Jak nakładać obrazy na siebie?

1

W poniższym kodzie mam stronę, która tworzy koszulę. Gdy użytkownik kliknie opcję („Mężczyzna / Kobieta”), sekcja „#shirt” wyświetla skonstruowaną koszulę, nakładając na siebie obrazy PNG. Na przykład wybranie podstawowego koloru „niebieskiego” spowoduje wyświetlenie obrazu niebieskiej koszuli. Następnie wybór szwów „żebrowanych” spowoduje umieszczenie obrazu na niebieskiej koszuli, która doda żebrowania. W tej chwili moim problemem jest to, że każdy nowy obraz zastępuje poprzednie. Wszystko inne działa dobrze (opcje wyświetlane w odpowiedzi na wcześniej wybrane opcje).

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

            }

        }

    });

});
I jsFiddled twój kod, aby zobaczyć, czy mogę uchwycić twój zamiar:jsfiddle.net/CJ62j - Nadal nie jestem pewien, co tychcieć osiągnąć? Proszę omówić, co powinno i gdzie. SpaceBison
Ok, więc w Jsfiddle: na przykład, jeśli wybierzesz niebieski kolor ciała, wyświetli się ciało koszuli. Później, jeśli wybierzesz zwykły szew ciała, a następnie niebieski, zastąpi oryginalny obraz ciała. Jednak powinien to dodać. Obraz jest w całości pngs i idealnie pasuje do siebie. To samo dotyczy informacji o cenie wyświetlanej w div ceny. Teraz jest zastąpiony, ale powinien zostać dodany. Stefan Schneider
Tak, dokładnie mam na myśli układanie warstw na sobie. Stefan Schneider
Nie jest do końca jasne, o co pytasz. Kiedy mówisz „dołącz do siebie”, co masz na myśli? lucuma
Chcesz powiedzieć, że chcesz układać zdjęcia jeden na drugim, aby dodawać różne kolorowe obrazy szczegółów na wierzchu obrazu koszulki podstawowej? RustyTheBoyRobot

Twoja odpowiedź

2   odpowiedź
0

zamiast używać:

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

Użyj.append(...) metoda.

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

jQuery .append ()

ah ok, źle zrozumiałem twoje pytanie. CoryDorning
To dołącza zdjęcia w sekcjach. Co nie jest intencją. W sekcjach zdjęcia należy zastąpić, ale same sekcje powinny być dodawane jeden po drugim. Wybierasz kolor korpusu koszulki, potem dodajesz kolor szwu itp. Stefan Schneider
Kulminacją jest:jsfiddle.net/CJ62j/1 - które po użyciu nie wyglądają dobrze. Nie myśl, że to jest intencja. SpaceBison
1

Po pierwsze, musisz zdecydować, w jakiej kolejności powinny pojawić się Twoje zdjęcia. Na przykład z twojego kodu powiedziałbym, że masz dwa poziomy (możesz dodać więcej poziomów, jeśli ich potrzebujesz):

BazaSzwy do ciała

Po drugie, przypisz każdy poziom do indeksu Z i utwórz<div> elementy dla każdego. Te<div>powinny być stylizowane tak, aby ich pozycjonowanie było absolutne, tak:

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

Prawdopodobnie określiłbym także szerokość / wysokość każdego z nich<div> dopasować swoje zdjęcia.

Na koniec użyj jQuery, aby ustawić każdą z nich<div> na górze obrazu podstawowego.

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

Następnie, gdy musisz zastąpić obrazy, po prostu użyj kodu, który masz:

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

Pamiętaj, że będziesz musiał użyć pustego obrazu zastępczego, aby użytkownicy mogli zobaczyć niższe warstwy, gdy jeszcze nie wybrali wyższych warstw.

Dzięki, to zrobiło pracę. Stefan Schneider

Powiązane pytania