Показать сообщение отдельно
  #1 (permalink)  
Старый 14.07.2019, 09:12
Аспирант
Отправить личное сообщение для zava75 Посмотреть профиль Найти все сообщения от zava75
 
Регистрация: 13.07.2018
Сообщений: 34

Скрытие и показ блоков с зависимости от выбора
Добрый день. Прошу прощения если не правильно написал вопрос. Кто разбирается в JQUERY помощи сижу с ночи мучаюсь.
есть код PHP где прописаны зависимости связанных опций продукта, связываются так родитель option-value="3" связывается с наследником зависимым значением master-option-value="3" изначально зависимые поля скрыты показываются только главные master-option-value="0" . Вообщем код работает но вот если все выбрать и изначально поменять цвет всё ломается(
<div class="product-options">
		<h3>Доступные варианты</h3>

		<div class="required" master-option="0" id="option-13">
			<label class="control-label">Цвет</label>
			<div id="input-option13">
				<div class="radio">
					<label>
						<input type="radio" name="option[13]" value="18" id="option-value-18" master-option-value="0" option-value="3">
						<img src="">
						<span class="option-value">Белый</span>
					</label>
				</div>
				<div class="radio">
					<label>
						<input type="radio" name="option[13]" value="24" id="option-value-24" master-option-value="0" option-value="16">
						<img src="">
						<span class="option-value">Чёрный</span>
						</span>
					</label>
				</div>
			</div>
		</div>

		<div class="required" master-option="2" id="option-14">
			<label class="control-label">Производительность (охл./обогрев), кВT</label>
			<div id="input-option14">
				<div class="radio">
					<label>
						<input type="radio" name="option[14]" value="19" id="option-value-19" master-option-value="3" option-value="17">
						<span class="option-value">2,2/2,3</span>
					</label>
				</div>
				<div class="radio" style="display: none;">
					<label>
						<input type="radio" name="option[14]" value="25" id="option-value-25" master-option-value="16" option-value="17">
						<span class="option-value">2,2/2,3</span>
						</span>
					</label>
				</div>
				<div class="radio">
					<label>
						<input type="radio" name="option[14]" value="20" id="option-value-20" master-option-value="3" option-value="18">
						<span class="option-value">2,5/2,8</span>
						</span>
					</label>
				</div>
			</div>
		</div>

		<div class="required" master-option="3" id="option-18">
			<label class="control-label">Потребляемая мощность (охл./обогрев), кВТ</label>
			<div id="input-option18">
				<div class="radio" style="display: none;">
					<label>
						<input type="radio" name="option[18]" value="26" id="option-value-26" master-option-value="17" option-value="9">
						<span class="option-value">0,69/0,63</span>
					</label>
				</div>
				<div class="radio" style="display: none;">
					<label>
						<input type="radio" name="option[18]" value="21" id="option-value-21" master-option-value="17" option-value="9">
						<span class="option-value">0,69/0,63</span>
					</label>
				</div>
				<div class="radio">
					<label>
						<input type="radio" name="option[18]" value="22" id="option-value-22" master-option-value="18" option-value="22">
						<span class="option-value">0,78/0,72</span>
					</label>
				</div>
			</div>
		</div>
	</div>

<script type="text/javascript">
$(document).ready(function() {

  $('.required[master-option!=0]').hide();
  // RADIO OPTION
  $('.radio input[type=radio]').on('click', function(){
    var option_value = $(this).attr('option-value');
    console.log(option_value);

    $result = $(this).closest('.required').next('.required').find('input[master-option-value = '+ option_value +' ]').closest('.required').show();
    $result.find('input[master-option-value != '+ option_value +' ]').closest('.radio').hide();

  });
});
</script>
Ответить с цитированием