1

На данный момент у меня есть RADIO с 3 вариантами выбора, и в зависимости от того что выбрать будет показан блок, эти 3 блоки одинаковые, но у них разные заголовки и параграфы, так вот, мне показалось нецелесообразно писать 3 одинаковых блока, и я подумал, реализовать один блок, но входные данные определял js, мой вопрос заключается в том, как это сделать по современным стандартам. Я думал сделать объект с 3 объектов в котором будут хранится заголовки и параграфы, и да я не прошу за меня написать код лишь метод реализации, и да извините, если вопрос глупый, я еще только учусь работать с js.

1 ответ 1

2

Как удобнее, так и сделайте.
Я бы, например, реализовал следующим образом.

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
  • 1
    спасибо за Ваш ответ, я примерно так и думал сделать
    – Mageeka
    15 фев 2021 в 5:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.