Initially, I use JavaScript to multiply the div but then encounter issues with the function not working properly.
function setDoorCount(count) {
$('.doors').html('');
for (var i = 0; i < count; i++) {
var content = "<div class='door' data-door='" + i + "'><img id='door-id-" + i + "' src='' /></div>";
$('.doors').append(content);
}
}
Subsequently, when attempting to open a dialog, it does not behave as expected.
var selectedDoorId = 0;
var openDialog = function() {
selectedDoorId = $(this).attr('data-door');
$('.dialog-button').click( function() {
var color = $(this).attr('id');
document.getElementById('door-id-' + selectedDoorId).src = 'http://www.#.asd' + color + '.png';
$('#door-panel-color').dialog('close');
});
$('#door-panel-color').dialog('open');
}
$(function() {
$( "#door-panel-color").dialog({
autoOpen: false,
minHeight: 'auto',
width: 650,
modal: true,
open: function(){
$('.ui-widget-overlay').bind('click',function(){
$('#door-panel-color').dialog('close');
})
}
})
$('.door').click(openDialog);
});
HTML:
<div class="doors">
<div class="door" data-door="0">
<img class="door-color" id="door-id-0" src="http://liukuovitukku.fi/images/door-colors/pahkina.png" />
</div>
</div>