Question

在下面的代码中，我有一个构建衬衫的页面。当用户点击选项（“男/女”）时，'＃shirt'部分通过将PNG图像叠加在一起来显示构造的衬衫。例如，选择“蓝色”的基色将显示蓝色衬衫的图像。然后，选择“罗纹”的身体缝线将图像放在蓝色衬衫的顶部，增加了罗纹细节。现在，我的问题是每个新图像都取代了以前的图像。其他一切正常（选项出现以响应之前选择的选项）。

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

            }

        }

    });

});

Answer 1

首先，您需要确定图像的显示顺序。例如，从您的代码中我会说您有两个级别（如果需要，可以添加更多级别）：

基
身体拼接

其次，将每个级别分配给z-index并为每个级别创建<div>个元素。这些<div>的样式应该是它们的定位是绝对的，如下所示：

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

我可能还会指定每个<div>的宽度/高度以匹配您的图片。

最后，使用jQuery将每个<div>定位在基本图像的顶部。

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

然后，当您需要替换图像时，只需使用您拥有的代码：

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

请注意，您必须使用空白占位图，以便用户在未选择更高层时可以看到较低层。

Answer 2

而不是使用：

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

使用.append(...)方法。

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

jQuery .append()

Jquery：如何将图像叠加在一起？

2 个答案: