0

Тренируюсь в написании конструктора на js. Не понимаю как связать два input между собой. То есть при выборе колонки - количество автомобилей: один, тип кровли:скат назад. При выборе - два автомобиля, скат назад - должна меняться картинка. Но событие висит на кнопке скат назад например. Можно ли написать одному Input два события, чтобы он понимал, нажато сверху "один" или "два", или как это сделать? Помогите пожалуйста введите сюда описание изображения

введите сюда описание изображения

5
  • 1
    Ничего не понять )) при выборе колонки - количество автомобилей: один, нужно чтобы radiobutton переместился на - тип кровли:скат ?
    – Arsen
    13 ноя 2018 в 18:31
  • @Arsen не совсем. поменял картинки. на первой выбран один автомобиль и скат назад. а выбирая два автомобиля, я не знаю как прикрепить к ней другую картинку. Ведь вешаю событие Onclick на нижние инпуты, а они ведь могут только одно событие обработать, вернее вызвать одну функцию. Проблема в том что при выборе двух автомобилей, я не знаю как назначить чтобы менялись события и нижних инпутов тоже 13 ноя 2018 в 18:44
  • Ну почти что то проясняется, может речь идёт о onchange? т.е можно просто написать скритп который "случает" изменения radiobutton, и в зависимости от value меняет картинку? я правильно понял?
    – Arsen
    13 ноя 2018 в 18:48
  • @Arsen думаю да, правильно 13 ноя 2018 в 19:15
  • можете свой html код показать?
    – Arsen
    13 ноя 2018 в 19:20

1 ответ 1

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" />

4
  • не работает почему то , написал на чистом 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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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