Pergunta sobre jquery, append, css, z-index – JQuery: Como colocar imagens em cima umas das outras?

1

No código a seguir, tenho uma página que constrói uma camiseta. À medida que o usuário clica em uma opção ("Masculino / Feminino"), a seção "#shirt" exibe a camiseta construída colocando as imagens PNG sobrepostas umas sobre as outras. Por exemplo, selecionar uma cor base de 'azul' mostrará uma imagem de uma camiseta azul. Em seguida, selecionando uma costura do corpo de "nervuras" irá colocar uma imagem em cima da camisa azul que adiciona o detalhe nervuras. Agora, meu problema é que cada nova imagem substitui as anteriores. Tudo o resto funciona bem (opções que aparecem em resposta a opções previamente selecionadas).

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

            }

        }

    });

});
Não está claro o que você está perguntando. Quando você diz "acrescentar um ao outro", o que você quer dizer? lucuma
Sim, exatamente, camadas umas sobre as outras é o que eu quero dizer. Stefan Schneider
Você está dizendo que deseja colocar imagens em cima umas das outras, para que você possa adicionar imagens com detalhes coloridos diferentes sobre uma imagem de camisa base? RustyTheBoyRobot
Eu jsfixei seu código para ver se conseguia entender sua intenção:jsfiddle.net/CJ62j - Eu ainda não tenho certeza se vocêquer alcançar? Por favor, explique sobre o que deve fazer e onde. SpaceBison
Ok, então no Jsfiddle: por exemplo, se você escolher a cor do corpo azul, ela exibe o corpo de uma camiseta. Mais tarde, se você escolher a costura do corpo e, em seguida, azul, substitui a imagem original do corpo. No entanto, deve adicioná-lo. A imagem são todos pngs e se encaixam perfeitamente um no outro. A mesma coisa para as informações de preço mostradas no campo de preços div. Agora é substituído, mas deve ser adicionado. Stefan Schneider

Sua resposta

2   a resposta
0

ao invés de usar:

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

use o.append(...) método.

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

jQuery .append ()

ah ok, entendeu mal sua pergunta. CoryDorning
Isso culmina em:jsfiddle.net/CJ62j/1 - que quando usado, não parece certo. Não pense que esta é a intenção. SpaceBison
Isso acrescenta as imagens dentro das seções. Qual não é a intenção. Nas seções, as imagens devem ser substituídas, mas as seções devem ser adicionadas uma a uma. Então, você escolhe a cor de um corpo de camiseta, depois adiciona uma cor de costura, etc. Stefan Schneider
1

você precisa decidir em qual ordem suas imagens devem aparecer. Por exemplo, do seu código, eu diria que você tem dois níveis (você pode adicionar mais níveis se precisar deles):

BaseCostura do corpo

Em segundo lugar, atribua cada nível a um z-index e crie<div> elementos para cada um. Estes<div>O estilo deve ser estilizado para que seu posicionamento seja absoluto, assim:

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

Eu provavelmente também especificaria a largura / altura de cada<div> para combinar suas imagens.

Finalmente, use o jQuery para posicionar cada<div> no topo da imagem base.

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

Então, quando você precisar substituir imagens, simplesmente use o código que você tem:

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

Observe que você terá que usar uma imagem de colocação em branco em branco para que os usuários possam ver as camadas inferiores quando ainda não tiverem selecionado camadas mais altas.

Obrigado, isso fez o trabalho. Stefan Schneider

Perguntas relacionadas