<script>
// Создаем объединенный массив данных
var data = [
{
size: '39',
info: 'Здесь меняется описание 1',
pics: [
'https://static.tildacdn.com/tild3366-3336-4136-b562-313762633664/pexels-alleksana-427.jpg',
'https://static.tildacdn.com/tild3534-3361-4533-b336-663534353764/pexels-alleksana-427.jpg',
]
},
{
size: '40',
info: 'Здесь меняется описание 2',
pics: [
'https://static.tildacdn.com/tild6136-3335-4764-a439-666561323830/pexels-alleksana-427.jpg',
'https://static.tildacdn.com/tild3564-3332-4533-b536-663431383163/pexels-alleksana-427.jpg',
]
},
{
size: '41',
info: 'Здесь меняется описание 3',
pics: [
'https://static.tildacdn.com/tild6535-3635-4730-a265-396564373966/pexels-alleksana-427.jpg',
'https://static.tildacdn.com/tild3564-3138-4239-b266-613765643761/pexels-alleksana-427.jpg',
]
}
];
$(function(){
var sizen_n = $('.n-size-el .tn-atom');
var razmer = $('.razmer .tn-atom');
var info_el = $('.info .tn-atom');
var pic1_el = $('.pic1 .tn-atom');
var pic2_el = $('.pic2 .tn-atom');
var pic3_el = $('.pic3 .tn-atom');
// Устанавливаем значения по умолчанию для первого элемента
updateData(0);
$(document).on('change', 'select[name="n-size"]', function(){
var num = $('select[name="n-size"] option:selected').index();
updateData(num);
});
// Функция для обновления данных на странице
function updateData(index) {
sizen_n.text(data[index].size);
razmer.text("Размер " + data[index].size);
info_el.text(data[index].info);
// Обновляем изображения
pic1_el.css('background-image', 'url('+ data[index].pics[0] + ')');
pic2_el.css('background-image', 'url('+ data[index].pics[1] + ')');
pic3_el.css('background-image', 'url('+ data[index].pics[2] + ')');
}
});
</script>