Тренируюсь в написании конструктора на js. Не понимаю как связать два input между собой. То есть при выборе колонки - количество автомобилей: один, тип кровли:скат назад. При выборе - два автомобиля, скат назад - должна меняться картинка. Но событие висит на кнопке скат назад например. Можно ли написать одному Input два события, чтобы он понимал, нажато сверху "один" или "два", или как это сделать? Помогите пожалуйста
-
1Ничего не понять )) при выборе колонки - количество автомобилей: один, нужно чтобы radiobutton переместился на - тип кровли:скат ?– Arsen13 ноя 2018 в 18:31
-
@Arsen не совсем. поменял картинки. на первой выбран один автомобиль и скат назад. а выбирая два автомобиля, я не знаю как прикрепить к ней другую картинку. Ведь вешаю событие Onclick на нижние инпуты, а они ведь могут только одно событие обработать, вернее вызвать одну функцию. Проблема в том что при выборе двух автомобилей, я не знаю как назначить чтобы менялись события и нижних инпутов тоже– RedLionHeart13 ноя 2018 в 18:44
-
Ну почти что то проясняется, может речь идёт о onchange? т.е можно просто написать скритп который "случает" изменения radiobutton, и в зависимости от value меняет картинку? я правильно понял?– Arsen13 ноя 2018 в 18:48
-
@Arsen думаю да, правильно– RedLionHeart13 ноя 2018 в 19:15
-
можете свой html код показать?– Arsen13 ноя 2018 в 19:20
Добавить комментарий
|
1 ответ
1. Решение на чистом CSS:
Вообще Ваша задача легко решается без использования js
.pic {
width: 300px;
height: 170px;
background-size: cover;
background-position: 50% 50%;
}
[value="one"]:checked ~ [value="nazad"]:checked ~ .pic {
background-image: url('https://2.bp.blogspot.com/-nJMKFNqFMuI/V6XeGKfFS0I/AAAAAAAACLI/qgvWT6ijtwMFdVnLjDj3fxbSSeEqVFCPACLcB/s1600/Timber_Saltbox_House.png');
}
[value="two"]:checked ~ [value="nazad"]:checked ~ .pic {
background-image: url('https://avatars.mds.yandex.net/get-pdb/912419/f26a1974-36a3-4fd2-9a3f-460dd49400c5/s1200?webp=false');
}
[value="one"]:checked ~ [value="dvuskatnaya"]:checked ~ .pic {
background-image: url('https://1metallocherepica.ru/wp-content/uploads/2013/12/stropila1.jpg');
}
[value="two"]:checked ~ [value="dvuskatnaya"]:checked ~ .pic {
background-image: url('https://papamaster.su/wp-content/uploads/2015/11/ris4-elementy-mnogoshhipcovoj-krovli.jpg');
}
Количество автомобилей:<br />
<input type="radio" name="auto" value="one" />Один
<input type="radio" name="auto" value="two" />Два
<br /><br />
Тип кровли:<br />
<input type="radio" name="krov" value="nazad" />Скат назад
<input type="radio" name="krov" value="dvuskatnaya" />Двускатная
<br /><br />
<div class="pic"></div>
2. Решение с jQuery:
Но если нужен именно какой-то скрипт, то следует повесить событие на все инпуты, а после клика проверять, какие именно из них выбраны
$('input').click(function() {
switch(true) {
case $('[name="krov"]:checked').val() == 'nazad' && $('[name="auto"]:checked').val() == 'one':
$('img').attr('src', 'https://2.bp.blogspot.com/-nJMKFNqFMuI/V6XeGKfFS0I/AAAAAAAACLI/qgvWT6ijtwMFdVnLjDj3fxbSSeEqVFCPACLcB/s1600/Timber_Saltbox_House.png');
break;
case $('[name="krov"]:checked').val() == 'nazad' && $('[name="auto"]:checked').val() == 'two':
$('img').attr('src', 'https://avatars.mds.yandex.net/get-pdb/912419/f26a1974-36a3-4fd2-9a3f-460dd49400c5/s1200?webp=false');
break;
case $('[name="krov"]:checked').val() == 'dvuskatnaya' && $('[name="auto"]:checked').val() == 'one':
$('img').attr('src', 'https://1metallocherepica.ru/wp-content/uploads/2013/12/stropila1.jpg');
break;
case $('[name="krov"]:checked').val() == 'dvuskatnaya' && $('[name="auto"]:checked').val() == 'two':
$('img').attr('src', 'https://papamaster.su/wp-content/uploads/2015/11/ris4-elementy-mnogoshhipcovoj-krovli.jpg');
break;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Количество автомобилей:<br />
<input type="radio" name="auto" value="one" />Один
<input type="radio" name="auto" value="two" />Два
<br /><br />
Тип кровли:<br />
<input type="radio" name="krov" value="nazad" />Скат назад
<input type="radio" name="krov" value="dvuskatnaya" />Двускатная
<br /><br />
<img src="" alt="(выберите кол-во авто и тип кровли)" width="300" />
-
не работает почему то , написал на чистом js. codepen.io/anon/pen/PxKwNw . Чисто по js посмотреть, где я накосячил? 16 ноя 2018 в 18:29
-
понял что не срабатывает событие click если передаешь через document.getelementsByTagName 16 ноя 2018 в 19:09
-
@RedLionHeart, зачем Вам "чистый js"? Зачем Вам здесь js вообще? Я же привёл пример с CSS - это и лучше, и быстрее. 16 ноя 2018 в 19:17
-
во первых, я пытаюсь тренироватья на js. во вторых, css не подходит под мои условия. всю форму не реализовать только на css. и я не знаю jquery 17 ноя 2018 в 8:36