10.06.2020, 10:18
|
|
Аспирант
|
|
Регистрация: 30.08.2019
Сообщений: 52
|
|
|
Смена 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
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
|
|
|
10.06.2020, 11:01
|
 |
Профессор
|
|
Регистрация: 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 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
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
... как вариант
<!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>
|
|
10.06.2020, 14:27
|
|
Профессор
|
|
Регистрация: 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.
|
|
10.06.2020, 14:49
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Почему бы не
<form><label><input type="radio" ...
и
document.querySelector('form').addEventListener('c hange', (e) => e.target.value ...
|
|
10.06.2020, 14:53
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
SuperZen,
|
|
11.06.2020, 09:19
|
|
Аспирант
|
|
Регистрация: 30.08.2019
Сообщений: 52
|
|
|
SuperZen,
что нужно изменить в посте 3, чтобы при закрытии вкладки и при повторном открытии, тема значков оставалась как перед закрытием (вернее как использовать localStorage в вашем случае?)
|
|
11.06.2020, 09:45
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
|
Сообщение от 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();
});
|
|
|
|
