Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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>
Ответить с цитированием
  #2 (permalink)  
Старый 14.07.2019, 10:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

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>
Ответить с цитированием
  #3 (permalink)  
Старый 14.07.2019, 11:21
Аспирант
Отправить личное сообщение для zava75 Посмотреть профиль Найти все сообщения от zava75
 
Регистрация: 13.07.2018
Сообщений: 34

Круто! Посоветуйте толковые курсы js может знаете ? Спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 14.07.2019, 14:47
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от zava75
Посоветуйте толковые курсы js
https://www.youtube.com/playlist?lis...EqMYbOyhLeWwem
толковей не встречал
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
скрытие и показ блоков folkemon Общие вопросы Javascript 1 02.12.2016 09:06
скрытие и показ блоков folkemon Общие вопросы Javascript 1 02.12.2016 08:59
Динамическое отображение контента на 2ой странице, в зависимости от выбора на 1ой Volchen0ck Events/DOM/Window 2 14.05.2014 16:01
html код в зависимости от выбора radio Findail Общие вопросы Javascript 6 30.03.2013 12:53
Скрытие резиновых блоков в зависимости от разрешения + листалка shtab Работа 2 08.06.2010 15:18