05.01.2016, 02:57
|
|
Интересующийся
|
|
Регистрация: 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
|
|
05.01.2016, 11:16
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
deadhunter,
сделайте обьект с ценами и html
|
|
05.01.2016, 12:35
|
|
Профессор
|
|
Регистрация: 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>
|
|
05.01.2016, 12:39
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Keramet,
где снятие предыдущего выбора в строке?
|
|
05.01.2016, 12:48
|
|
Профессор
|
|
Регистрация: 30.12.2015
Сообщений: 194
|
|
|
рони,
строка 33
|
|
05.01.2016, 12:52
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Keramet,
и что это даёт? выбрать можно сразу 3 варианта завтрака а не только 1
|
|
05.01.2016, 12:53
|
|
Профессор
|
|
Регистрация: 30.12.2015
Сообщений: 194
|
|
|
рони,
ну я ж точно не знаю, что надо ТСу. Просто добавить ещё одну проверку. Ну сейчас попробую переработать с вашими замечаниями ))
|
|
05.01.2016, 15:10
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
калькулятор тарифного плана
 
<!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>
|
|
05.01.2016, 20:31
|
|
Интересующийся
|
|
Регистрация: 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 в 20:36.
|
|
05.01.2016, 20:32
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
deadhunter,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
|
|
