In this code snippet, I have a webpage that allows users to customize their own shirt. By selecting options such as "Male/Female," the '#shirt' section dynamically displays an image of the constructed shirt by layering PNG images on top of each other. For instance, choosing a base color like 'blue' will show an image of a blue shirt. Then, selecting a body stitching option like "ribbed" adds another image on top of the base color image with ribbing detail. The issue I'm facing currently is that each new image replaces the previous one instead of stacking on top of it. Other functionalities like displaying options based on previously selected choices are working correctly.
<div id="gender" class="diy-box">
Choose 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">
Choose Body Color<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">
Choose Body Color<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 Type<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 Stitching<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 Stitching<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(); // picks 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'); // targets the div with the radio button value selected
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);
}
}
});
});