Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Смена img в зависимости от выбранного radio (https://javascript.ru/forum/misc/80483-smena-img-v-zavisimosti-ot-vybrannogo-radio.html)

MOT 10.06.2020 10:18
Смена img в зависимости от выбранного radio
 
Доброго времени суток! Мне нужно сделать смену нескольких img по смене 1 radio. Код:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<img src='https://image.flaticon.com/icons/svg/246/246144.svg' />
<img src='https://image.flaticon.com/icons/svg/1383/1383327.svg' />
<img src='https://image.flaticon.com/icons/svg/324/324084.svg' />
<!--Вместо первой картинки при измении позиции radio: 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 -->
<label><input type="radio" id="Wb" name="img" checked>ЧБ</label>
<label><input type="radio" id="color" name="img">Цвет</label>
</body>
</html>

Были попытки на js, но эти попытки дают лишь смену 1 img. Помогите реализовать смену img на js (не автоматическую).

рони 10.06.2020 10:45
MOT,
https://javascript.ru/forum/events/8...tml#post525245

SuperZen 10.06.2020 11:01 
<!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 inputRadios = document.querySelectorAll('input[name="img"]');
    const imagePlaceholders = document.querySelectorAll('img.image-placeholder');
    function onChange() {
      const { value } = [...inputRadios].find(i => i.checked === true);
      imagePlaceholders.forEach((imgTag, index) => imgTag.src = images[value][index]);
    }
    inputRadios.forEach(r => r.addEventListener('change', onChange));
    onChange();
  });
</script>

</html>

рони 10.06.2020 13:18
:write:
... как вариант 
<!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" checked>ЧБ</label>
    <label><input type="radio" name="img" >Цвет</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 inputRadios = document.querySelectorAll('input[name="img"]');
        const imagePlaceholders = document.querySelectorAll('img.image-placeholder');
        const onChange = value => () => imagePlaceholders.forEach((imgTag, index) => imgTag.src = images[value][index]);
        inputRadios.forEach((r, i)  => (i = onChange(i), r.addEventListener('change', i), r.checked && i()));
    });
</script>

</html>

SuperZen 10.06.2020 14:27
рони, ыыы

дубль три )
<!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>

laimas 10.06.2020 14:49
Почему бы не

<form><label><input type="radio" ...
и
document.querySelector('form').addEventListener('c hange', (e) => e.target.value ...

рони 10.06.2020 14:53
SuperZen,
:)

MOT 11.06.2020 09:19
SuperZen,
что нужно изменить в посте 3, чтобы при закрытии вкладки и при повторном открытии, тема значков оставалась как перед закрытием (вернее как использовать localStorage в вашем случае?)

рони 11.06.2020 09:45
Цитата:
Сообщение от MOT
что нужно изменить в посте 3
 
document.addEventListener('DOMContentLoaded', () => {
        const inputRadios = document.querySelectorAll('input[name="img"]');
        const imagePlaceholders = document.querySelectorAll('img.image-placeholder');
        function onChange() {
            const { value } = [...inputRadios].find(i => i.checked === true);
            localStorage.indexChecked = value;
            imagePlaceholders.forEach((imgTag, index) => imgTag.src = images[value][index]);
        }
        inputRadios.forEach(r => r.addEventListener('change', onChange));
        inputRadios[localStorage.indexChecked||0].checked = true;
        onChange();
    });


Часовой пояс GMT +3, время: 09:17.