Связь двух input в отношении работы с DOM JS

125

15 апреля 2019, 22:10

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

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

Answer 2

window.onload = function() { 
  document.querySelector('div').addEventListener('change', function(e) { 
    console.log(document.querySelector('.roof_side').style.display); 
    if (e.target.className == 'number_two') { 
      document.querySelector('.roof_side').style.display = 'none'; 
      document.querySelector('.roof_back').checked = true; 
    } else if (e.target.className == 'number_one') { 
      document.querySelector('.roof_side').style.display = ''; 
    } 
    let sImgName = ''; 
    document.querySelectorAll('div input[type="radio"]').forEach(function(item) { 
      if (item.checked) { 
        sImgName += item.value; 
      } 
    }); 
    // Нужно указать путь к папке с изображениями и назвать картинки в соответствии с sImgName 
    // document.querySelector('img').src = '//www.site.net/images/' + sImgName + '.jpg' 
    document.querySelector('img').src = `https://dummyimage.com/270x180/777777/ffffff.jpg&text=${sImgName + '.jpg'}`; 
  }); 
}

div { font: 12px 'Arial'; margin: 0 auto; width: 500px; } p { font: bold 12px 'Arial'; margin: 15px 0 3px; } img { float: right; }

<div> 
  <img src=""> 
  <h2>Конструктор гаража</h2> 
  <p>Количество автомобилей</p> 
  <label><input type="radio" name="number" value="one" checked class="number_one">Один</label> 
  <label><input type="radio" name="number" value="two" class="number_two">Два</label> 
  <p>Тип кровли</p> 
  <label><input type="radio" name="roof" value="back" checked class="roof_back">Скат назад</label> 
  <label><input type="radio" name="roof" value="dubble">Двускатная</label><br> 
  <label class="roof_side"><input type="radio" name="roof" value="side">Скат набок</label> 
</div>