Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Разные значения в зависимости от опций (https://javascript.ru/forum/events/43187-raznye-znacheniya-v-zavisimosti-ot-opcijj.html)

Batyabest 26.11.2013 15:34
Ниже привожу код - там скорее всего только каркас, котрый нужно "оживить"ю
function Display(which) {
  co1=document.getElementById("constr1");
  co2=document.getElementById("constr2");
  co3=document.getElementById("constr3");
  if (which=="constr1") co1.style.display="block";
    else co1.style.display="none";
  if (which=="constr2") co2.style.display="block";
    else co2.style.display="none";
  if (which=="constr3") co3.style.display="block";
    else co3.style.display="none";
}



<h2>Калькулятор стоимости</h2>
<form name="calc">
	<p>Выберите тип здания</p>
	<input type="radio" name="type" value="panel" checked>Панельный<br>
	<input type="radio" name="type" value="kirpich">Кирпичный
	<p>Выберите тип окна</p>
		<table border="0" cellpadding="0" cellspacing="0" width="500" height="1" id="maintbl">
			<tbody>
				<tr valign="middle" height="1">
					<td align="center" style="padding:0 5px;">
						<img src="/img/1.jpg" border="0" height="105">
						<br>
						<input type="radio" name="constr_type" value="constr1" checked onClick="Display('constr1');">
					</td>
					<td align="center" style="padding:0 5px;">
						<img src="/img/2.jpg" border="0" height="105">
						<br>
						<input type="radio" name="constr_type" value="constr2" onClick="Display('constr2');">
					</td>
					<td align="center" style="padding:0 5px;">
						<img src="/img/3.jpg" border="0" height="105">
						<br>
						<input type="radio" name="constr_type" value="constr3" onClick="Display('constr3');">
					</td>
				</tr>
			</tbody>
		</table>
		
<div id="constr1">
	<img src="/img/solid_w.jpg" style="display:block;">
</div>		
		
<div id="constr2">
	<img src="/img/solid_wv.jpg" style="display:none">
</div>		
		
<div id="constr3">
	<img src="/img/solid_wv1.jpg" style="display:none">
</div>		
		
	<p>Выберите тип профиля</p>
		<input type="radio" name="prifile_type" value="profile1" checked>Kraspan<br>
		<input type="radio" name="prifile_type" value="profile2">Veka<br>
		<input type="radio" name="prifile_type" value="profile3">Veka ProLine<br>
</form>


В скрипте который написан смысл вот какой - при выборе типа окна (constr1, 2, 3) Должен отображаться соответсвующий рисунок крупнее в дивах constr1, 2, 3. но у меня почему-то при выборе значения 2 и 3 крупная картинка пропадает, а при выборе constr1 появляется как положено.

Batyabest 26.11.2013 15:40
Цитата:
Сообщение от Batyabest
но у меня почему-то при выборе значения 2 и 3 крупная картинка пропадает, а при выборе constr1 появляется как положено.
Разобрался сам. style display="none" было прописано у img, а не у div

ksa 26.11.2013 16:00
Да и сам код, вместе с контентом не фонтан...

Это тебе на анализы. :D 

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function Display(Obj) {
	var o=document.getElementById('img_all').getElementsByTagName('div');
	var id=Obj.value;
	for (var i=0; i<o.length; i++) {
		o[i].style.display=(o[i].id==id)? 'block': 'none';
	};
};
</script>
</head>
<body>
<h2>Калькулятор стоимости</h2>
<form name="calc">
	<p>Выберите тип здания</p>
	<input type="radio" name="type" value="panel" checked>Панельный<br>
	<input type="radio" name="type" value="kirpich">Кирпичный
	<p>Выберите тип окна</p>
	<table border="0" cellpadding="0" cellspacing="0" width="500" height="1" id="maintbl">
		<tbody>
			<tr valign="middle" height="1">
				<td align="center" style="padding:0 5px;">
					<img src="/img/1.jpg" border="0" height="105">
					<br>
					<input type="radio" name="constr_type" value="constr1" checked onclick="Display(this);">
				</td>
				<td align="center" style="padding:0 5px;">
					<img src="/img/2.jpg" border="0" height="105">
					<br>
					<input type="radio" name="constr_type" value="constr2" onclick="Display(this);">
				</td>
				<td align="center" style="padding:0 5px;">
					<img src="/img/3.jpg" border="0" height="105">
					<br>
					<input type="radio" name="constr_type" value="constr3" onclick="Display(this);">
				</td>
			</tr>
		</tbody>
	</table>
	<div id='img_all'>	
		<div id="constr1">
			<img src="http://javascript.ru/forum/images/smilies/smile.gif" />
		</div>		
		<div id="constr2" style="display:none">
			<img src="http://javascript.ru/forum/images/smilies/mad.gif" />
		</div>		
		<div id="constr3" style="display:none">
			<img src="http://javascript.ru/forum/images/smilies/laugh.gif" />
		</div>		
	</div>		
	<p>Выберите тип профиля</p>
	<input type="radio" name="prifile_type" value="profile1" checked>Kraspan<br>
	<input type="radio" name="prifile_type" value="profile2">Veka<br>
	<input type="radio" name="prifile_type" value="profile3">Veka ProLine<br>
</form>
</body>
</html>

Batyabest 26.11.2013 16:13
Цитата:
Сообщение от ksa
Это тебе на анализы.
Это ты типа сжалился надо мной? А как же неполученная материальная выгода? :)

ksa 26.11.2013 16:17
Цитата:
Сообщение от Batyabest
Это ты типа сжалился надо мной?
Жалость тут не при чем. :D
Просто вижу - действительно человек что-то ваяет... Значит имеет право на помощь/подсказку.

Цитата:
Сообщение от Batyabest
А как же неполученная материальная выгода?
Я каждый вечер плачу, подсчитывая убытки... :cray:

Batyabest 26.11.2013 16:21
Вот если бы ты мне подсказал как мне еще и разные стоимости забить в зависимости от того, что выбрано в самом начале - панельный или кирпичный. Было бы вообще GOOD

Batyabest 26.11.2013 16:30 
<script language="javascript">
function Display(which) {
  co1=document.getElementById("constr1");
  co2=document.getElementById("constr2");
  co5=document.getElementById("constr5");
  if (which=="constr1") co1.style.display="block";
    else co1.style.display="none";
  if (which=="constr2") co2.style.display="block";
    else co2.style.display="none";
  if (which=="constr5") co5.style.display="block";
    else co5.style.display="none";
}
</script>
<h2>Калькулятор стоимости</h2>
<form name="calc">
	<p>Выберите тип здания</p>
	<input type="radio" name="type" value="panel" checked>Панельный<br>
	<input type="radio" name="type" value="kirpich">Кирпичный
	<p>Выберите тип окна</p>
		<table border="0" cellpadding="0" cellspacing="0" width="500" height="1" id="maintbl">
			<tbody>
				<tr valign="middle" height="1">
					<td align="center" style="padding:0 5px;">
						<img src="/img/1.jpg" border="0" height="105">
						<br>
						<input type="radio" name="constr_type" value="constr1" checked onClick="Display('constr1');">
					</td>
					<td align="center" style="padding:0 5px;">
						<img src="/img/2.jpg" border="0" height="105">
						<br>
						<input type="radio" name="constr_type" value="constr2" onClick="Display('constr2');">
					</td>
					<td align="center" style="padding:0 5px;">
						<img src="/img/5.jpg" border="0" height="105">
						<br>
						<input type="radio" name="constr_type" value="constr5" onClick="Display('constr5');">
					</td>
				</tr>
			</tbody>
		</table>
		
<div id="constr1" style="display:block; margin: 20px 0;">
	<img src="/img/solid_w.jpg">
</div>		
		
<div id="constr2" style="display:none; margin: 20px 0;">
	<img src="/img/solid_w.jpg">
	<img src="/img/solid_w.jpg" style="margin: 0 0 0 -10px;">
</div>		
		
<div id="constr5" style="display:none; margin: 20px 0;">
	<img src="/img/solid_w.jpg" style="margin: 0 0 104px 0;">
	<img src="/img/turnrew_b.jpg" style="margin: 0 0 0 -10px;">
</div>		
		
	<p>Выберите тип профиля</p>
		<input type="radio" name="prifile_type" value="profile1" checked>Kraspan<br>
		<input type="radio" name="prifile_type" value="profile2">Veka<br>
		<input type="radio" name="prifile_type" value="profile3">Veka ProLine<br>
</form>


Получилось вот так. Следующий этап - это забить в коде стоимости. Они разные в зависимости от типа здания (панельный или кирпичный), типа профиля и типа окна.
Я думаю главным критерием сделать тип здания. Мол если панельный, то такая цена ушла в сумму, а если кирпичный то другая.

подскажите с чего начать. Мне кажется надо чего-то передавать в полях type="hidden"?

ksa 26.11.2013 16:32
Цитата:
Сообщение от Batyabest
подскажите с чего начать
С определения зависимостей тех цен... Нужно точно знать как одно зависит от другого, от этого и плясать...

ksa 26.11.2013 16:35
Цитата:
Сообщение от Batyabest
Получилось вот так.
Сильно смахивает на говнокод... :-E

Начинай использовать классы, вместо style... Определяй однотипные элементы... И про циклы не забывай! :D Все эти "перечисления случаев" сильно смахивает на ламерство. ;)

Batyabest 26.11.2013 16:38
Цитата:
Сообщение от ksa
С определения зависимостей тех цен...
Все дело в том, что цены не изменяются на какую-то определенную величину постоянную. Понятно одно, в кирпичном доме дороже.


Часовой пояс GMT +3, время: 07:05.
Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице