Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.01.2016, 01:57
Интересующийся
Отправить личное сообщение для deadhunter Посмотреть профиль Найти все сообщения от deadhunter
 
Регистрация: 05.01.2016
Сообщений: 11

нужна помощь по созданию калькулятора тарифного плана
есть три категории и в каждой по три варианта: S M L
например:
завтрак S M L
обед S M L
ужин S M L

рядом кнопка узнать цену. на варианты (S M L) нужно нажать. при нажатии выделяется выбранный вариант. когда нажимаешь узнать цену система подсчитывает итог, исходя из данных, полученных от пользователя, который выбрал определенные варианты.
например: завтрак S, обед M, ужин L => цена 1000
завтрак L, обед L, ужин L => цена 3000
Ответить с цитированием
  #2 (permalink)  
Старый 05.01.2016, 10:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,530

deadhunter,
сделайте обьект с ценами и html
Ответить с цитированием
  #3 (permalink)  
Старый 05.01.2016, 11:35
Профессор
Отправить личное сообщение для Keramet Посмотреть профиль Найти все сообщения от Keramet
 
Регистрация: 30.12.2015
Сообщений: 194

Так пойдёт?
<!doctype html>
<html>
	<head>
		<meta charset="utf8">
		<title>Завтрак - Обед - Ужин</title>
<style>
table {
	border: 1px solid black;
}
td {
	border: 1px dotted gray;	
	height: 30px;
	width: 30px;
}
</style>
		<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
		<script>
			var main = function () {
				"use strict";
	
				var coasts =   [[100, 200, 300],
								[150, 250, 350],
								[180, 280, 380]];

				$("table td").toArray().forEach(function (element) {
					var $el = $(element);
					var $total = $("#total");
				
					$el.on("click", function() {
						var i, j;
						i = $el.attr("id")[0];
						j = $el.attr("id")[1];
						if ( $el.text() ) {
							$el.text("");
							if ( $total.text ) $total.text( +$total.text() - +coasts[i][j] );
						} else  {
							$el.text(coasts[i][j]);
							$total.text( +$total.text() + +coasts[i][j] );
						}			  
					});
				});
			};

			$(document).ready(main);
		</script>
	</head>
	
	<body>
			<p>Общая стоимость: <span id='total'></span></p>
			<table>
				<tr>
					<td></td>
					<td>S</td>
					<td>M</td>
					<td>L</td>
				</tr>
				<tr>
					<td>Завтрак</td>
					<td id="00"></td>
					<td id="01"></td>
					<td id="02"></td>
				</tr>
				<tr>
					<td>Обед</td>
					<td id="10"></td>
					<td id="11"></td>
					<td id="12"></td>
				</tr>
				<tr>
					<td>Ужин</td>
					<td id="20"></td>
					<td id="21"></td>
					<td id="22"></td>
				</tr>
			</table>

	</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 05.01.2016, 11:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,530

Keramet,
где снятие предыдущего выбора в строке?
Ответить с цитированием
  #5 (permalink)  
Старый 05.01.2016, 11:48
Профессор
Отправить личное сообщение для Keramet Посмотреть профиль Найти все сообщения от Keramet
 
Регистрация: 30.12.2015
Сообщений: 194

рони,
строка 33
Ответить с цитированием
  #6 (permalink)  
Старый 05.01.2016, 11:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,530

Keramet,
и что это даёт? выбрать можно сразу 3 варианта завтрака а не только 1
Ответить с цитированием
  #7 (permalink)  
Старый 05.01.2016, 11:53
Профессор
Отправить личное сообщение для Keramet Посмотреть профиль Найти все сообщения от Keramet
 
Регистрация: 30.12.2015
Сообщений: 194

рони,
ну я ж точно не знаю, что надо ТСу. Просто добавить ещё одну проверку. Ну сейчас попробую переработать с вашими замечаниями ))
Ответить с цитированием
  #8 (permalink)  
Старый 05.01.2016, 14:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,530

калькулятор тарифного плана

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  table {
	border: 1px solid black;
}
td {
	border: 1px dotted gray;
	height: 30px;
	width: 30px;
}
.num{
  cursor: pointer;
}
.active, th:first-of-type   {
     font-weight: bold;
      color: #0000CD;
       background-color: #DCDCDC;
}

 </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
var coasts =   [[100, 200, 300],
	            [150, 250, 350],
				[180, 280, 380]];
var title = ['Завтрак','Обед','Ужин'];
var sum = [];
$.each(coasts, function(c, d) {
    var a = $("<tr/>", {
        html: $("<td/>", {
            text: title[c]
        })
    });
    $.each(d, function(d, b) {
        $("<td/>", {
            "class": "num",
            text: b,
            click: function() {
                sum[c] = b;
                $("td", a).not($(this).addClass("active")).removeClass("active");
                $("th:first").html("Итого: " + sum.reduce(function(a, b) {
                    return a + (b || 0)
                }, 0))
            }
        }).appendTo(a).click()
    });
    a.appendTo($("table"))
});
});


  </script>
</head>

<body>
<table width="400"  >
	<thead>
		<tr><th></th>
			<th>S</th>
			<th>M</th>
			<th>L</th>
		</tr>
	</thead>
	<tbody>

	</tbody>
</table>


</body>

</html>
Ответить с цитированием
  #9 (permalink)  
Старый 05.01.2016, 19:31
Интересующийся
Отправить личное сообщение для deadhunter Посмотреть профиль Найти все сообщения от deadhunter
 
Регистрация: 05.01.2016
Сообщений: 11

спасибо за ваш код. намного круче того, что я смог. если не сложно - вот html:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>calculator</title>
        <style>
        .container {
            display: block;
            background: green;
            width: 600px;
            height:250px;
        }
        .plan {
            width:100px;
        }
        .value-breakfast {
            text-align: center; 
            margin-top: -138px;
        }
        .value-breakfast div a{
            margin: 35px;
        }

        .value-supper {
            text-align: center;
            margin-top: 28px;
        }

        .value-supper div a{
            margin: 35px;
        }

        .value-dinner {
            text-align: center;
            margin-top: 28px;
        }

        .value-dinner div a{
            margin: 35px;
        }
        .cost {
            background: red;
            width: 150px;
            height: 25px;
            margin-top:20px;
            margin-left:125px;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="plan">
                <h2>Breakfast</h2>
                <h2>Supper</h2>
                <h2>Dinner</h2>
            </div>
            <div class="value-breakfast">
                <div><a>S</a> <a>M</a> <a>L</a></div>
            </div>
            <div class="value-supper">
                <div><a>S</a> <a>M</a> <a>L</a></div>
            </div>
            <div class="value-dinner">
                <div><a>S</a> <a>M</a> <a>L</a></div>
            </div>
            <div id="cost"class="cost">
                <a id="cost-btn">Узнать цену</a>
            </div>
        </div>
    </body>
</html>


S=1000 M=2000 L=3000

Последний раз редактировалось deadhunter, 05.01.2016 в 19:36.
Ответить с цитированием
  #10 (permalink)  
Старый 05.01.2016, 19:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,530

deadhunter,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужна помощь в доработке калькулятора. kostarikano Ваши сайты и скрипты 1 19.12.2015 22:41
Нужна помощь по javascript darklend Общие вопросы Javascript 0 12.01.2014 21:33
Нужна помощь по слайдеру seoguru Работа 3 28.01.2013 20:02
Нужна помощь по созданию карты Konstantine Элементы интерфейса 1 26.03.2011 23:43
нужна помощь dominosoko Серверные языки и технологии 4 14.03.2010 01:17