Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Скрытие и показ блоков с зависимости от выбора (https://javascript.ru/forum/jquery/78016-skrytie-i-pokaz-blokov-s-zavisimosti-ot-vybora.html)

zava75 14.07.2019 09:12
Скрытие и показ блоков с зависимости от выбора
 
Добрый день. Прошу прощения если не правильно написал вопрос. Кто разбирается в JQUERY помощи сижу с ночи мучаюсь.:help:
есть код 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>

рони 14.07.2019 10:18
zava75,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    $(".required[master-option!=0]").hide();
    $(".radio input[option-value]").on("click", function() {
        $(".required[master-option!=0], .required[master-option!=0] .radio").hide();

        function tree(input) {
            var num = $(input).attr("option-value");
            $(".required [master-option-value=" + num + "]").show().parents(".required, .radio").show();
            $(".required [master-option-value=" + num + "]:checked").each(function(i, input) {
                tree(input)
            })
        }
        $(".required [master-option-value=0]:checked").each(function(i, input) {
            tree(input)
        })
    })
});
  </script>
</head>

<body>
<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>

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

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

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

</body>
</html>

zava75 14.07.2019 11:21
Круто! Посоветуйте толковые курсы js может знаете ? Спасибо!

j0hnik 14.07.2019 14:47
Цитата:
Сообщение от zava75
Посоветуйте толковые курсы js
https://www.youtube.com/playlist?lis...EqMYbOyhLeWwem
толковей не встречал


Часовой пояс GMT +3, время: 16:33.