50 lines
2.1 KiB
JavaScript
50 lines
2.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const items = document.querySelectorAll('.clothing-item');
|
|
const shirtDisplay = document.getElementById('shirt-display');
|
|
const pantsDisplay = document.getElementById('pants-display');
|
|
const capDisplay = document.getElementById('cap-display');
|
|
const resetButton = document.getElementById('reset-button');
|
|
const modelDisplay = document.getElementById('model-display');
|
|
const modelThumbnails = document.querySelectorAll('.model-thumbnail');
|
|
|
|
items.forEach(item => {
|
|
item.addEventListener('click', function () {
|
|
const color = this.dataset.color;
|
|
const itemType = this.dataset.type;
|
|
|
|
if (itemType === 'shirt') {
|
|
shirtDisplay.style.backgroundColor = color;
|
|
shirtDisplay.style.display = 'block';
|
|
} else if (itemType === 'pants') {
|
|
pantsDisplay.style.backgroundColor = color;
|
|
pantsDisplay.style.display = 'block';
|
|
} else if (itemType === 'cap') {
|
|
capDisplay.style.backgroundColor = color;
|
|
capDisplay.style.display = 'block';
|
|
}
|
|
});
|
|
});
|
|
|
|
resetButton.addEventListener('click', function () {
|
|
shirtDisplay.style.display = 'none';
|
|
pantsDisplay.style.display = 'none';
|
|
capDisplay.style.display = 'none';
|
|
shirtDisplay.style.backgroundColor = 'transparent';
|
|
pantsDisplay.style.backgroundColor = 'transparent';
|
|
capDisplay.style.backgroundColor = 'transparent';
|
|
});
|
|
|
|
modelThumbnails.forEach(thumbnail => {
|
|
thumbnail.addEventListener('click', function() {
|
|
// Remove active class from all thumbnails
|
|
modelThumbnails.forEach(t => t.classList.remove('active'));
|
|
// Add active class to the clicked one
|
|
this.classList.add('active');
|
|
// Change the main model image source
|
|
const fullSrc = this.dataset.fullSrc;
|
|
if (fullSrc) {
|
|
modelDisplay.src = fullSrc;
|
|
}
|
|
});
|
|
});
|
|
}); |