На данный момент у меня есть RADIO с 3 вариантами выбора, и в зависимости от того что выбрать будет показан блок, эти 3 блоки одинаковые, но у них разные заголовки и параграфы, так вот, мне показалось нецелесообразно писать 3 одинаковых блока, и я подумал, реализовать один блок, но входные данные определял js, мой вопрос заключается в том, как это сделать по современным стандартам. Я думал сделать объект с 3 объектов в котором будут хранится заголовки и параграфы, и да я не прошу за меня написать код лишь метод реализации, и да извините, если вопрос глупый, я еще только учусь работать с js.
1 ответ
Как удобнее, так и сделайте.
Я бы, например, реализовал следующим образом.
let obj = { // данные храним в массиве
id0: {name: 'Иван Иванов', age: 18, from: 'Russia, Moscow'},
id1: {name: 'Пётр Петров', age: 43, from: 'Ukraina, Kiev'},
id3: {name: 'Сергей Сидоров', age: 20, from: 'Belarus, Minsk'}
},
list = document.querySelector('#list'),
content = document.querySelector('#content'),
temp = `<h1>%name%</h1>
<p>Age: <b>%age%</b></p>
<p>From: <b>%from%</b></p>`; // "шаблон" под данные храним отдельно
for(let key in obj)
list.insertAdjacentHTML('beforeend', `<input type="radio" id="${key}" name="obj"><label for="${key}">${obj[key].name}</label>`); // Выводим все вариант как переключатель
list.addEventListener('click', e => { // Вешаем обработчик
if(e.target.tagName === 'INPUT') {
let data = obj[e.target.id];
content.innerHTML = temp // Меняем вывод данные под "заготовленный" шаблон.
.replace(/%name%/gm, data.name)
.replace(/%age%/gm, data.age)
.replace(/%from%/gm, data.from);
}
});
list.querySelector('input').click();
<div id="list"></div>
<div id="content"></div>
-
1