1

次のコードには、シャツを作成するページがあります。ユーザーがオプション (「男性/女性」) をクリックすると、「#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);

            }

        }

    });

});
4

2 に答える 2

1

まず、画像を表示する順序を決定する必要があります。たとえば、コードから、2 つのレベルがあると言えます (必要に応じてさらにレベルを追加できます)。

  1. ベース
  2. ボディステッチ

次に、各レベルを 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 + "' />");

ユーザーがまだ上位のレイヤーを選択していないときに下位のレイヤーが表示されるように、空白のプレースホールディング イメージを使用する必要があることに注意してください。

于 2012-05-30T14:39:25.480 に答える
0

使用する代わりに:

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

メソッドを使用し.append(...)ます。

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

jQuery.append()

于 2012-05-30T13:57:53.177 に答える