Показать сообщение отдельно
  #5 (permalink)  
Старый 10.06.2020, 14:27
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

рони, ыыы

дубль три )
<!DOCTYPE html>
<html>

<head>
  <style>
    img {
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <img class="image-placeholder" />
  <img class="image-placeholder" />
  <img class="image-placeholder" />
  <label><input type="radio" name="img" value="0" checked>ЧБ</label>
  <label><input type="radio" name="img" value="1">Цвет</label>
</body>

<script>
  const images = {
    "0": [
      'https://image.flaticon.com/icons/svg/246/246144.svg',
      'https://image.flaticon.com/icons/svg/1383/1383327.svg',
      'https://image.flaticon.com/icons/svg/324/324084.svg',
    ],
    "1": [
      'https://image.flaticon.com/icons/svg/220/220603.svg',
      'https://image.flaticon.com/icons/png/512/1383/1383260.png',
      'https://image.flaticon.com/icons/png/512/324/324107.png',
    ]
  };
  document.addEventListener('DOMContentLoaded', () => {
    const radios = document.querySelectorAll('input[type="radio"][name="img"]');
    const placeholders = document.querySelectorAll('img.image-placeholder');
    const onChange = ({ target: { value = 0 } = {} } = {}) => placeholders.forEach((p, i) => p.src = images[value][i]);
    radios.forEach(r => r.addEventListener('change', onChange));
    onChange();
  });
</script>

</html>


<!DOCTYPE html>
<html>

<head>
  <style>
    img {
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <img class="image-placeholder" />
  <img class="image-placeholder" />
  <img class="image-placeholder" />
  <label><input type="radio" name="img" value="0" checked>ЧБ</label>
  <label><input type="radio" name="img" value="1">Цвет</label>
</body>

<script>
  const images = {
    "0": [
      'https://image.flaticon.com/icons/svg/246/246144.svg',
      'https://image.flaticon.com/icons/svg/1383/1383327.svg',
      'https://image.flaticon.com/icons/svg/324/324084.svg',
    ],
    "1": [
      'https://image.flaticon.com/icons/svg/220/220603.svg',
      'https://image.flaticon.com/icons/png/512/1383/1383260.png',
      'https://image.flaticon.com/icons/png/512/324/324107.png',
    ]
  };
  document.addEventListener('DOMContentLoaded', () => {
    const placeholders = document.querySelectorAll('img.image-placeholder');
    const onChange = ({ target: { value = 0 } = {} } = {}) => placeholders.forEach((p, i) => p.src = images[value][i]);
    document.querySelectorAll('input[type="radio"][name="img"]').forEach(r => r.addEventListener('change', onChange))
    onChange()
  });
</script>

</html>

Последний раз редактировалось SuperZen, 10.06.2020 в 14:43.
Ответить с цитированием