| dzho | 24.09.2016 09:42 |
Посмотрите пожалуйста нарисовал схемку как выглядит таблица
Калькулятор с вариантом значений.
Всем привет. Только осваиваюсь в js так что прошу поддержки как разобраться с этим.
1. Дана форма 2. При выборе select и checkbox в input подставлялись значения ( как поставить их не могу определиться или в input hidden или через массивы ); 3. От первого значение select зависит второй select также checkbox Например: Выбираю из первого select>option с названием "productOne" его значение заноситься в привязанный к нему input ( например цена 50 руб ) От выбора первого select>option зависит последующие input. т.е productTwo зависит от первого select>option "productOne" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Training JavaScript</title> </head> <body> <!-- select product --> <select id="view"> <option selected id = "option">Выбрать</option> <option id = "optionOne">product</option> <option id = "optionTwo">productTwo</option> <option id = "optionFour">productThree</option> </select> <br> <br> <!-- color product --> <select id="viewOne"> <option value="red">colorRed</option> <option value="blue">colorBlue</option> </select> <br> <br> <!-- checkbox list --> <input type="checkbox" id="list"> <br> <!-- Здесь значение меняються от выбранных вариантов --> <!-- size product --> <input type="text" id = "rez" placeholder="0 руб"> <!-- зависимость от первого select --> <br> <br> <input type="text" id = "rezOne" placeholder="0 руб"> <!-- зависимость от второго select --> <br> <br> <input type="text" id = "rezTwo" placeholder="0 руб"> <!-- зависимость от checkbox --> <br> <br> <input type="text" id="summa" placeholder="Сумма"> <script src="common.js"></script> </body> </html> |
Ничего не понятно. Что за что отвечает? Если список задает цену при выборе в нем, то зачем input, ведь в нем можно цену и изменить? Если цена вводится в поле, то что означает выбор в списке?
|
Посмотрите пожалуйста нарисовал схемку как выглядит таблица |
если выбираешь в первом селекте чайник1, то цена меняется в остальных. Если выбираешь чайник 2 также значения меняются в остальных.
|
dzho,
обьект нужен со всеми вашими зависимостями |
Пожалуйста можете написать пример как это реализовать.
|
dzho,
сложность ваших зависимостей ,как вы их описали выше, возрастает в геометрической прогрессии, мне сложно такое просто для примера написать, а так ищите по форуму и в инете зависимые селекторы. |
Цитата:
Цена = 50. Если нажали кнопку, то Цена = ? Данные-то все у тебя. Бери и меняй. Какая-то бредовая бизнес-логика к тому же. |
Ребята, написал демку, так как понял что я не понятно для Вас обьяснил.
https://jsfiddle.net/0aappu0v/ |
dzho,
ок! |
рони, это не намек на что вот демка возьмите и сделайте, просто прошу помощи как её реализовать.
|
Не так все делается. Сперва надо спроектировать структуру данных, где все барахло будет лежать.
|
т.е значения в обьектах не хранить или есть другой вариант?
|
dzho,
в одном обьекте структуру дерево создать, и всё в форму тогда change только на форму |
Без реляционной БД ты застрелишься в реальном масштабе с такой чухней. Другими словами ты откусил гораздо больше, чем сможешь проглотить. Ну или жуй.
Нужна таблица продуктов и таблица опций продуктов, минимально так: Таблица Автомобили. ID Название Таблица Цвет ID ProductID Название цвета Цена Таблица Опции ID ProductID Название опции Цена Технически так и делается, но ты мне покажи бизнес-логику. Как ты определишь цену на Мазда Красная Опция1, если у тебя в каждой блеать опции конечная цена продукта? Ты думал об этом, да, и придумал перевернуть все через жопу, то есть загнать все цвета и опции в запись продукта, то есть Таблица Автомобили. ID Название Название цвета 0 - Цена Название цвета 1 - Цена Название цвета 2 - Цена Название опции 1 - Цена Нифига не полегчало. Как ты выберешь Мазда Цвет 0 Опция 1, если выбрать можно только что-то одно? Нельзя же выбрать два цвета - красный и синий. Ну, технически можно, но это получится бред. Чтобы выбрать Опцию дополнительно к цвету, придется ввести еще признак, показывающий, что эту опцию можно выбрать дополнительно к уже выбранным, поскольку цвет - такая опция как и любая другая, то есть одно из потребительских свойств продукта. Твоя бредовая бизнес-логика и не дает тебе понять и реализовать этот бред. Делай нормально. Нормально это как выше. Цены за цвет и опции определяются как таковые, то есть как за отдельные товары, несмотря, что это опции. Это значит базовый цвет будет стоить 0, базовая опция - без которой нельзя продать машину, будет стоить 0. А все навороты - больше 0. Следовательно в продуктовой таблице цена за товар уже включает в себя базовую комплектацию и значит там есть цена Таблица Автомобили. ID Название Цена базовой комплектации |
Если машинки там чисто для примера, то действующее вещество твоего бреда вот где
Название Название цвета 0 - Цена Название цвета 1 - Цена Название цвета 2 - Цена Название опции 1 - Цена Из такого списка можно выбрать только одну опцию, а у тебя задумка, выбирать из него цвет по одному и еще опцию эту дополнительно. Конечно ты можешь захардкодить бредовую логику прямо в скрипп, ну захардкодь. |
зависимые селекты и сумма
:write:
вариант для медитации ... при условии product это начальная цена, всё остальное повышающие коэффициенты.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.optionally:checked ~ .rez {
display: inline;
}
.optionally ~ .rez {
display: none;
}
</style>
</head>
<body>
<p>
Если Выбрал значения из первого select т.е mazda значения цен одни, а когда выбираешь например bmw<br>
то значения другие.
</p>
<form id="form" action="http://">
<!-- select product -->
<select class="car">
<option value="">Выбрать</option>
<option value="mazda">mazda</option>
<option value="lada">lada</option>
<option value="bmw">bmw</option>
</select>
<br>
<br>
<!-- color product -->
<select class="color">
<option value="">Выбрать</option>
<option value="red">Красный</option>
<option value="blue">Белый</option>
<option value="blue">Синий</option>
</select>
<br>
<br>
<!-- checkbox list -->
<br>
<br>
<!-- Здесь значение меняються от выбранных вариантов -->
<!-- size product -->
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от первого select -->
<br>
<br>
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от второго select -->
<br>
<br>
<input type="checkbox" class="optionally" id="opt"><label for="opt">дополнительный настройки
</label>
<br>
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от checkbox -->
<br>
<label>Здесь суммируются значения котые выбрал пользователь</label><br>
<input type="text" class="summa" placeholder="Сумма">
</form>
<script>
window.addEventListener("DOMContentLoaded", function() {
var d = {
mazda: {
product: 350,
red: 450,
white: 500,
blue: 550,
option: 360
},
lada: {
product: 400,
red: 600,
white: 700,
blue: 350,
option: 660
},
bmw: {
product: 600,
red: 700,
white: 300,
blue: 340,
option: 360
}
},
f = document.querySelector("#form"),
g = f.querySelector(".summa"),
h = f.querySelectorAll(".rez"),
a = f.querySelectorAll(".car, .color, #opt"),
b;
f.addEventListener("change", function() {
var c = a[0].value;
b = [0, 0, 0];
if (c) {
b[0] = d[c].product;
var e = a[1].value;
e && (b[1] = d[c][e]);
a[2].checked && (b[2] = d[c].option)
} else a[1].value = "";
g.value = b.reduce(function(b, a, c) {
h[c].value = a + " руб.";
return b + a
}, 0) + " руб."
})
});
</script>
</body>
</html>
|
Рони, спасибо это почти то что нужно:)
http://codepen.io/dzheysen/pen/amJYWJ на основе этого сделал превьюшку но есть сложности как реализовать добавленный функционал // Здесь проблема. Как сделать чтобы при выборе цвета была зависимость в значениях checkbox // например пользователь выбрал значение 1.20 и значения меняются // получаеться так если 1м.20см то значения c такой ценой // option: 1500, // optionTwo: 1400, // optionThree: 2000, // а если 1м.50см // option: 2400, // optionTwo: 0, // optionThree: 0, // optionFour: 0, // optionFive: 0 |
dzho,
не понимаю вашего описания, будет дерево, будет код. |
<div class="block-form">
<form id="form" action="http://">
<h2>Наши услуги</h2>
<div class="block-left">
<!-- Выбор услуги -->
<select class="ListService">
<option value="">Выбрать</option>
<option value="Enamelling">Эмалировка</option>
<option value="Starkril">Старкрил 2</option>
<option value="liquidAcrylic">Жидкий акрил</option>
<option value="AcrylicLiner">Акриловый вкладыш</option>
</select>
<br>
<!-- Длина ванны -->
<select class="meters">
<option value="">Выбрать</option>
<option value="meterOne">1м.20 см</option>
<option value="meterTwo">1м.50 см</option>
<option value="meterThree">1м.70 см</option>
</select>
<!-- Опции услуг -->
<label for="opt">
<input type="checkbox" class="optionally" id="opt"><p>Цвет ванны</p>
</label>
<label for="opt1">
<input type="checkbox" class="optionally" id="opt1"><p>Установка уголка</p>
</label>
<label for="opt2">
<input type="checkbox" class="optionally" id="opt2"><p>Установка сливной системы</p>
</label>
<label for="opt3">
<input type="checkbox" class="optionally" id="opt3"><p>Установка экрана под ванну</p>
</label>
<label for="opt4">
<input type="checkbox" class="optionally" id="opt4"><p>Установка счетчиков.гор. холодной воды</p>
</label>
<label for="opt5">
<input type="checkbox" class="optionally" id="opt5"><p>Установка счетчиков.хол. горячей воды</p>
</label>
<h3>Итого</h3>
</div>
<div class="block-right">
<!-- checkbox list -->
<!-- Здесь значение меняются от выбранных вариантов -->
<!-- size product -->
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от первого select -->
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от второго select -->
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<br>
<input type="text" class="summa" placeholder="Сумма">
</form>
</div>
</div>
window.addEventListener("DOMContentLoaded", function() {
var d = {
Enamelling: { // Эмалировка
product: 1500, // цена
meterOne: 1400, // стоимость длины ванны 1.20
meterTwo: 1500, // стоимость длины ванны 1.50
meterThree: 1500, //стоимость длины ванны 1.70
colorBath: 0, // стоимость цвета заливки
option: 1500, // checkbox установка уголка
optionTwo: 1400, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
Starkril: { // Старкрил 2
product: 2000, // цена
meterOne: 1400, // стоимость длины ванны 1.20
meterTwo: 1500, // стоимость длины ванны 1.50
meterThree: 1500, //стоимость длины ванны 1.70
colorBath: 0, // стоимость цвета заливки
option: 1500, // checkbox установка уголка
optionTwo: 1400, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
liquidAcrylic: { // Жидкий акрил
product: 3000, // цена
meterOne: 1500, // стоимость длины ванны 1.20
meterTwo: 2000, // стоимость длины ванны 1.50
meterThree: 2500, //стоимость длины ванны 1.70
colorBath: 0, // стоимость цвета заливки
option: 1500, // checkbox установка уголка
optionTwo: 1400, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
AcrylicLiner: { // Акриловый вкладыш
product: 1500, // цена
meterOne: 1400, // стоимость длины ванны 1.20
meterTwo: 3000, // стоимость длины ванны 1.20
meterThree: 3000, //стоимость длины ванны 1.70
colorBath: 2000, // стоимость цвета заливки
option: 2000, // checkbox установка уголка
optionTwo: 0, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
},
f = document.querySelector("#form"),
g = f.querySelector(".summa"),
h = f.querySelectorAll(".rez"),
a = f.querySelectorAll(".ListService, .meters, #opt", "#opt2", "#opt3","#opt4","#opt5"),
b;
f.addEventListener("change", function() {
var c = a[0].value;
b = [0, 0, 0, 0, 0 , 0, 0];
if (c) {
b[0] = d[c].product;
var e = a[1].value;
e && (b[1] = d[c][e]);
a[2].checked && (b[2] = d[c].option )
} else a[2].value = "";
g.value = b.reduce(function(b, a, c) {
h[c].value = a + " руб.";
return b + a
}, 0) + " руб."
})
});
Сейчас не работает вызов опций начинаю от "Установка уголка" просмотрев Ваш код не совсем понял как подцепить эти их :) Так же логика при выборе услуги " Старкрил2" получается пользователь выбирает эту услугу размер ванны 1.20 то изменяются значения опций option: 1500, // checkbox установка уголка optionTwo: 1400, // checkbox установка сливной системы optionThree: 2000, // checkbox установка экрана под ванну а если выбирает "Стакрил2" размер ванны 1.50 изменяются значения опций option: 2400, // checkbox установка уголка optionTwo: 0, // checkbox установка сливной системы optionThree: 0, // checkbox установка экрана под ванну optionFour: 0, // установка счетчиков гор.холодн.воды optionFive: 0 // установка счетчиков хол. горячей воды значения изменяются при выборе 1.70 colorBath: 0, // цвет ванны option: 2400, // checkbox установка уголка optionTwo: 0, // checkbox установка сливной системы optionThree: 1000, // checkbox установка экрана под ванну optionFour: 0, // установка счетчиков гор.холодн.воды optionFive: 0 // установка счетчиков хол. горячей воды Надеюсь расписал доходчиво:) |
Шизики блин развлекаются в порядке "не мешайте страдать". Когда-то я тоже не знал SQL, а про JSON не знал вообще, и ничтоже сумняще захерачил сайт с бд в файлах на XML'e. Вот как делается блин, если вы на русском не понимаете, то поймете на xml'ном
<cars> <car_params> <part id="1">Тип кузова / Цвет</part> <part id="2">Двигатель</part> <part id="3">Коробка передач</part> <part id="4">Тормоза</part> <part id="5">Топливо / Бак</part> <part id="6">Расход топлива</part> <part id="7">Руль / Свет</part> <part id="8">Привод</part> <part id="9">Мультимедия</part> <part id="10">Интерьер</part> </car_params> <price_params> <price id="1">Прокат на 1 сутки с лимитом пробега в 250 км</price> <price id="2">Прокат на 1 сутки без лимита пробега</price> <price id="3">Тариф выходного дня с лимитом пробега в 250 км</price> <price id="4">Тариф выходного дня без лимита пробега</price> <price id="5">Переплата за каждый километр свыше лимита</price> <price id="6">Почасовая аренда автомобиля без водителя</price> </price_params> <car id ="Lancer15"> <title> <manufacturer>Mitsubishi</manufacturer> <modelName>Lancer</modelName> <bodyName>X 1.5</bodyName> </title> <parts> <part id="1">Седан / Черный</part> <part id="2">Объем: 1.5 л. Мощность: 109 лс.</part> <part id="3">Автоматическая; вариатор с ручным режимом</part> <part id="4">Дисковые. ABS + EBD (система распределения тормозных усилий)</part> <part id="5">Неэтилированный бензин Аи-92 / 59 л.</part> <part id="6">Город: 8.9; Трасса: 6.0; Смешанный цикл: 7.0</part> <part id="7">Слева / Европейский + противотуманные фары</part> <part id="8">Передний</part> <part id="9">CD-MP3 ресивер, радио, 4 динамика</part> <part id="10">Концидионер, подогрев сидений, тканевая обивка, фильтр салона</part> </parts> <prices> <price id="1">3700</price> <price id="2">4200</price> <price id="3">11100</price> <price id="4">12600</price> <price id="5">5</price> <price id="6">500</price> </prices> </car> <car_params> сущность (таблица) названий сущностей параметров для всех машин, и она связана с любой таблицей <car><parts> через атрибут id <price_params> таблица названий услуг для всех машин и она связана с любой таблицей <car><prices> через атрибут id То есть <car_params> и <price_params> существуют в единственном экземпляре, а <parts> и <params> существуют в любом количестве внутри сущности <car>, которых может быть любое количество. Это называется нормализация. Без нормализации dzho ты будешь тонуть в гавнокоде при каждом чихе. А рони, он просто не понимает, что такое реляционная БД, а у тебя как раз реляционная БД на входе. Развлекайтесь далее. |
Машинками надоело торговать, продаешь ванны? Ну какая разница. Сущности надо выяснять, а не говнокоды писать.
Enamelling: { // Галоперидол
product: 1500, // цена за какую длину?
meterOne: 1400, // Где длина?
meterTwo: 1500, // стоимость длины ванны 1.50 - где длина?
meterThree: 1500, //стоимость длины ванны 1.70 - где длина?
colorBath: 0, // А если из 20 оттенков 3 будут по другой цене?
option: 1500, // и чем отличается установка уголка на чугун от пластика?
optionTwo: 1400, // какое отношение эмалированная ванна
optionThree: 2000, // имеет к сервису
optionFour: 850, // установки счетчиков
optionFive: 900 // и еще установки счетчиков ???
},
ржунимагу блин. Не будет так работать никогда. |
А теперь самое больное. У машинки есть базовая и опции, а у ванны нет опций, нельзя убрать цвет или покрытие, можно только выбрать из того, что производится. На json ванная опупея будет примерно такой
var params={
Len:{
1:1200,
2:1500,
3:1700,
},
Hue:{
1:'Perl',
2:'Pale',
3:'Water',
4:'Smoke'
},
Mat:{
1:'Чугун',
2:'Сталь',
3:'Акрил'
},
Sur:{
1:'Эмаль',
2:'Гуашь',
3:'Акрил'
},
Shp:{
1:'Овальная',
2:'Прямоугольная',
3:'Трехуйгольная'
}
},
products={
'00007643':{
id:'00007643',
name:'Акриловая овальная ванна Даздраперма белого цвета длиной 1500 мм',
len:2,
mat:3,
hue:1,
sur:null,
shp:1,
price:10500
},
'00007644':{
id:'00007644',
name:'Чугунная ванна Заря трехуйгольной формы палевого цвета длиной 1700 мм',
len:3,
mat:3,
hue:2,
sur:1,
shp:3,
price:20500
},
'00007645':{
id:'00007645',
name:'Стальная прямоугольная ванна Иосиф дымчатого цвета длиной 1200 мм',
len:1,
mat:2,
hue:4,
sur:3,
shp:1,
price:15400
},
};
Зачем тогда все эти шмопции, если ценник уже вписан в продукт и название целиком его описывает? Ну для фильтрации и быстрого поиска. Так вот имея такой нормализованный жисон, становится проще пареной репы приделать к нему интерфейс, поскольку уже все само самочевидно. |
А насчет опций оттенка скажем, с ними известный затык. Как ты продашь серый цвет без артикула? Как ты проведешь серый без артикула? Как отчитаешься за серый без артикула?
Любая опция порождает сущность - артикул товара. Либо ты продаешь не один товар, а комплект из более чем одного артикула. Всякие уголки и счетчики так и продаются - как список артикулов, как чек с итого. Прекращайте мозг насиловать и займитесь уже делом. Лал. |
dzho,
это не дерево, это грабли ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="block-form">
<form id="form" action="http://">
<h2>Наши услуги</h2>
<div class="block-left">
<!-- Выбор услуги -->
<select class="ListService">
<option value="">Выбрать</option>
<option value="Enamelling">Эмалировка</option>
<option value="Starkril">Старкрил 2</option>
<option value="liquidAcrylic">Жидкий акрил</option>
<option value="AcrylicLiner">Акриловый вкладыш</option>
</select>
<br>
<!-- Длина ванны -->
<select class="meters">
<option value="">Выбрать</option>
<option value="meterOne">1м.20 см</option>
<option value="meterTwo">1м.50 см</option>
<option value="meterThree">1м.70 см</option>
</select>
<!-- Опции услуг -->
<label for="opt">
<input type="checkbox" class="optionally" id="opt"><p>Цвет ванны</p>
</label>
<label for="opt1">
<input type="checkbox" class="optionally" id="opt1"><p>Установка уголка</p>
</label>
<label for="opt2">
<input type="checkbox" class="optionally" id="opt2"><p>Установка сливной системы</p>
</label>
<label for="opt3">
<input type="checkbox" class="optionally" id="opt3"><p>Установка экрана под ванну</p>
</label>
<label for="opt4">
<input type="checkbox" class="optionally" id="opt4"><p>Установка счетчиков.гор. холодной воды</p>
</label>
<label for="opt5">
<input type="checkbox" class="optionally" id="opt5"><p>Установка счетчиков.хол. горячей воды</p>
</label>
<h3>Итого</h3>
</div>
<div class="block-right">
<!-- checkbox list -->
<!-- Здесь значение меняются от выбранных вариантов -->
<!-- size product -->
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от первого select -->
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от второго select -->
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<br>
</div>
<input type="text" class="summa" placeholder="Сумма">
</form>
</div>
<script>
window.addEventListener("DOMContentLoaded", function() {
var d = {
Enamelling: { // Эмалировка
product: 1500, // цена
meterOne: 1400, // стоимость длины ванны 1.20
meterTwo: 1500, // стоимость длины ванны 1.50
meterThree: 1500, //стоимость длины ванны 1.70
colorBath: 0, // стоимость цвета заливки
option: 1500, // checkbox установка уголка
optionTwo: 1400, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
Starkril: { // Старкрил 2
product: 2000, // цена
meterOne: 1400, // стоимость длины ванны 1.20
meterTwo: 1500, // стоимость длины ванны 1.50
meterThree: 1500, //стоимость длины ванны 1.70
colorBath: 0, // стоимость цвета заливки
option: 1500, // checkbox установка уголка
optionTwo: 1400, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
liquidAcrylic: { // Жидкий акрил
product: 3000, // цена
meterOne: 1500, // стоимость длины ванны 1.20
meterTwo: 2000, // стоимость длины ванны 1.50
meterThree: 2500, //стоимость длины ванны 1.70
colorBath: 0, // стоимость цвета заливки
option: 1500, // checkbox установка уголка
optionTwo: 1400, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
AcrylicLiner: { // Акриловый вкладыш
product: 1500, // цена
meterOne: 1400, // стоимость длины ванны 1.20
meterTwo: 3000, // стоимость длины ванны 1.20
meterThree: 3000, //стоимость длины ванны 1.70
colorBath: 2000, // стоимость цвета заливки
option: 2000, // checkbox установка уголка
optionTwo: 0, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
},
f = document.querySelector("#form"),
g = f.querySelector(".summa"),
h = f.querySelectorAll(".rez"),
a = f.querySelectorAll(".ListService, .meters, #opt,#opt1, #opt2, #opt3, #opt4,#opt5"),
b,
k = ["colorBath","option","optionTwo","optionThree","optionFour","optionFive"];
f.addEventListener("change", function() {
var c = a[0].value;
b = [0, 0, 0, 0, 0 , 0, 0];
if (c) {
b[0] = d[c].product;
var e = a[1].value;
e && (b[1] = d[c][e]);
k.forEach(function(el,i) {
a[i+2].checked && (b[i+2] = d[c][el] )
});
} else a[2].value = "";
g.value = b.reduce(function(b, a, c) {
h[c].value = a + " руб.";
return b + a
}, 0) + " руб."
})
});
</script>
</body>
</html>
|
Цитата:
Только олени так делают, запихивают в продуктовую страницу двадцать других продуктов, а потом платят спаммерам за раскрутку, поскольку такое гавно невозможно проиндексировать нормально. Ну а наш страдалец изобретает гавно из гавна. |
"Дерево" растет сугубо в навигационной таблице, которую можно и отрендерить как дерево, а каталог это всегда тупо листинг, список артикулов. И нафиг на ламоду не надо ходить, любые форумы так устроены. По id записи можно найти к какой теме она относится и к какой рубрике, вот так http://javascript.ru/forum/showthread.php?p=429718
|
То есть адрес example.com/bath/197643-vanna-is-chugunia делается для красоты и по традиции, на самом деле он может быть таким example.com/197643 Никто в 21 веке не полезет в адресную строку стирать 197643-vanna-is-chugunia чтобы добраться до /bath Никто.
|
Если хочешь дерево, то проектируй дерево, есть решения, но практика не выносит их на поверхность, потому что деревья оказались не нужны. Все делают в adjacent list и похеру на некоторую избыточность данных. Нормализация не культ.
|
В туторах по реляционным бд излюбленная фактура гуру - музыка. Типа пот есть альбом, у него есть исполнитель, год и треки. Типа вот таблица треков, там есть ид альбома, у альбома есть ид исполнителя, все красиво. Все красиво, пока это попса, а если классика? Если Аллегро Лето Вивальди исполняли 100500 оркестров? Или если эту прокладку производят 100500 фабрик? Деревья - это прошлое, это файловая система. В сетях давно рулят долбаные графы.
|
Warren buffet я считаю что данный метод подходит отлично для маленького обьема данных в таком виде что указал рони. Для различных сайт визиток, landing page. А реляционная база данных уже для более крупных проектов. Хотя использовать Jsom в данном случае также отличный вариант.
|
рони спасибо огромное. Вопрос а как добавить условия при выборе услуги старкрил2
if (starkil == 1м.20см) {
option: 1500,
optionTwo: 1400,
optionThree: 2000
}
if (starkil == 1м.40см) {
option: 2400,
optionTwo: 0,
optionThree: 0,
optionFour: 0,
optionFive: 0
}
if (starkil == 1м.70) {
colorBath: 0,
option: 2400,
optionTwo: 0,
optonThree: 1000,
optionFour: 0,
optionFive: 0
}
|
Цитата:
примерно так ... продолжение ... :cray:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="block-form">
<form id="form" action="http://">
<h2>Наши услуги</h2>
<div class="block-left">
<!-- Выбор услуги -->
<select class="ListService">
<option value="">Выбрать</option>
<option value="Enamelling">Эмалировка</option>
<option value="Starkril">Старкрил 2</option>
<option value="liquidAcrylic">Жидкий акрил</option>
<option value="AcrylicLiner">Акриловый вкладыш</option>
</select>
<br>
<!-- Длина ванны -->
<select class="meters">
<option value="">Выбрать</option>
<option value="meterOne">1м.20 см</option>
<option value="meterTwo">1м.50 см</option>
<option value="meterThree">1м.70 см</option>
</select>
<!-- Опции услуг -->
<label for="opt">
<input type="checkbox" class="optionally" id="opt"><p>Цвет ванны</p>
</label>
<label for="opt1">
<input type="checkbox" class="optionally" id="opt1"><p>Установка уголка</p>
</label>
<label for="opt2">
<input type="checkbox" class="optionally" id="opt2"><p>Установка сливной системы</p>
</label>
<label for="opt3">
<input type="checkbox" class="optionally" id="opt3"><p>Установка экрана под ванну</p>
</label>
<label for="opt4">
<input type="checkbox" class="optionally" id="opt4"><p>Установка счетчиков.гор. холодной воды</p>
</label>
<label for="opt5">
<input type="checkbox" class="optionally" id="opt5"><p>Установка счетчиков.хол. горячей воды</p>
</label>
<h3>Итого</h3>
</div>
<div class="block-right">
<!-- checkbox list -->
<!-- Здесь значение меняются от выбранных вариантов -->
<!-- size product -->
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от первого select -->
<input type="text" class="rez" placeholder="0 руб" readonly="readonly"> <!-- зависимость от второго select -->
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<input type="text" class="rez" placeholder="0 руб" readonly="readonly">
<br>
</div>
<input type="text" class="summa" placeholder="Сумма">
</form>
</div>
<script>
window.addEventListener("DOMContentLoaded", function() {
var d = {
Enamelling: { // Эмалировка
product: 1500, // цена
meterOne: 1400, // стоимость длины ванны 1.20
meterTwo: 1500, // стоимость длины ванны 1.50
meterThree: 1500, //стоимость длины ванны 1.70
colorBath: 0, // стоимость цвета заливки
option: 1500, // checkbox установка уголка
optionTwo: 1400, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
Starkril: { // Старкрил 2
product: 2000, // цена
meterOne: 1400, // стоимость длины ванны 1.20
meterTwo: 1500, // стоимость длины ванны 1.50
meterThree: 1500, //стоимость длины ванны 1.70
colorBath: 0, // стоимость цвета заливки
option: 1500, // checkbox установка уголка
optionTwo: 1400, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
liquidAcrylic: { // Жидкий акрил
product: 3000, // цена
meterOne: 1500, // стоимость длины ванны 1.20
meterTwo: 2000, // стоимость длины ванны 1.50
meterThree: 2500, //стоимость длины ванны 1.70
colorBath: 0, // стоимость цвета заливки
option: 1500, // checkbox установка уголка
optionTwo: 1400, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
AcrylicLiner: { // Акриловый вкладыш
product: 1500, // цена
meterOne: 1400, // стоимость длины ванны 1.20
meterTwo: 3000, // стоимость длины ванны 1.20
meterThree: 3000, //стоимость длины ванны 1.70
colorBath: 2000, // стоимость цвета заливки
option: 2000, // checkbox установка уголка
optionTwo: 0, // checkbox установка сливной системы
optionThree: 2000, // checkbox установка экрана под ванну
optionFour: 850, // установка счетчиков гор.холодн.воды
optionFive: 900 // установка счетчиков хол. горячей воды
},
},
f = document.querySelector("#form"),
g = f.querySelector(".summa"),
h = f.querySelectorAll(".rez"),
a = f.querySelectorAll(".ListService, .meters, #opt,#opt1, #opt2, #opt3, #opt4,#opt5"),
b,
k = ["colorBath","option","optionTwo","optionThree","optionFour","optionFive"],
m = {Starkril : {meterOne : { option: 1500,
optionTwo: 1400,
optionThree: 2000},
meterTwo : {
option: 2400,
optionTwo: 0,
optionThree: 0,
optionFour: 0,
optionFive: 0
},
meterThree : {
colorBath: 0,
option: 2400,
optionTwo: 0,
optonThree: 1000,
optionFour: 0,
optionFive: 0
} } }
;
f.addEventListener("change", function() {
var c = a[0].value;
b = [0, 0, 0, 0, 0 , 0, 0];
if (c) {
b[0] = d[c].product;
var e = a[1].value;
e && (b[1] = d[c][e]);
k.forEach(function(el,i) {
a[i+2].checked && (b[i+2] = m[c] && m[c][e] && m[c][e][el] !== void(0) ? m[c][e][el] : d[c][el] )
});
} else a[2].value = "";
g.value = b.reduce(function(b, a, c) {
h[c].value = a + " руб.";
return b + a
}, 0) + " руб."
})
});
</script>
</body>
</html>
|
Цитата:
|
warren buffet а как вы бы реализовали такой не большой калькулятор. И почему у Вас столько негатива к этому коду ? Очень интересно в чем его минусы?
|
Рони а Вам огромное спасибо:)
|
Цитата:
|
это калькулятор с выбором услуг.
|
Услуги и товары одни и те же сущности.
Специально, чтобы тебя ни в жизнь ни один ПС не проиндексировал и не нашел, даже если все сантехники в мире сдохнут, чтобы не нашел ни один ПС, гавнокод в качестве примера как такое делается.
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<script>
var
CURRENCY = ' руб.',
works={
title:'Услуга',
data:{
1:'Эмалировка',
2:'Старкрил 2',
3:'Жидкий акрил',
4:'Акриловый вкладыш'
},
},
params={
opt:{
title:'Опции',
data:{
1:'Установка уголка',
2:'Монтаж экрана',
3:'Монтаж слива',
4:'Счетчик горячей воды',
5:'Счетчик холодной воды'
}
},
hue:{
title:'Оттенок',
data:{
1:'Белый',
2:'Красный',
3:'Желтый',
4:'Синий'
}
},
len:{
title:'Длина, см',
data:{
1:'120',
2:'150',
3:'170',
4:'200'
}
}
},
offers={
1:{
price:1500,
params:{
len:{
1:1400,
2:1500,
3:1500
},
hue:{
1:0,
2:120,
3:150,
4:90
},
opt:{
1:1500,
2:1700,
3:2000,
4:3000,
5:2000
}
}
},
2:{
price:2500,
params:{
len:{
1:1200,
2:1300,
3:1700
},
hue:{
1:0,
2:220,
3:250,
4:190
},
opt:{
1:1200,
2:1500,
3:1800,
4:2900,
5:2500
}
}
},
3:{
price:1900,
params:{
len:{
1:1200,
2:1780,
3:1499
},
hue:{
1:0,
2:126,
3:145,
4:199
},
opt:{
1:1500,
2:1700,
3:2000,
4:3000,
5:2000
}
}
},
4:{
price:1500,
params:{
len:{
1:1400,
2:1500,
3:1500
},
hue:{
1:0,
2:120,
3:150,
4:90
},
opt:{
1:1500,
2:1700,
3:2000,
4:3000,
5:2000
}
}
}
}
total=0,prodList=calcButton=null;
function resetList(el){
v=el.querySelectorAll('select');
for(var i=0;i<v.length;i++)
v[i].selectedIndex=-1;
}
function renderParams(ev){
if(ev.target.nodeName!='SELECT') return;
var v=ev.target.value;
if(!(v in offers)) return;
var offer=offers[v],html=[];
total=offer.price;
for(v in offer.params) {
var h=[];
for(var p in offer.params[v])
h.push(renderOption(offer.params[v][p],params[v].data[p]
+' + '+offer.params[v][p]+CURRENCY));
html.push('<label>'+params[v].title+': </label>'
+'<select>'+h.join('')+'</select>'+'<br/><br/>');
}
prodList.innerHTML=html.join('');
resetList(prodList);
calcButton.disabled=false;
}
function renderOption(v,t){
return '<option value="'+v+'">'+t+'</option>';
}
function renderOptions(obj){
var html=[];
for(var p in obj)
html.push(renderOption(p,obj[p]+': '+offers[p].price+CURRENCY));
return html.join('');
}
function renderWorks(classname) {
var el=document.querySelector('.'+classname);
el.innerHTML='<label>'+works.title+': <label>'
+'<select>'+renderOptions(works.data)+'</select>';
resetList(el);
el.addEventListener('change',renderParams);
}
function renderTotal(){
v=prodList.querySelectorAll('select');
for(var i=t=0;i<v.length;i++)
t+= +v[i].value;
document.querySelector('.total-sum').textContent=(total+t)+CURRENCY;
}
</script>
</head>
<body>
<div class="filters-block"></div><br/><br/>
<div class="product-list"></div>
<button class="calc-total" disabled="disabled">Рассчитать</button><br/><br/>
<div class="total-sum"></div>
<script>
prodList=document.querySelector('.product-list');
calcButton=document.querySelector('.calc-total');
calcButton.addEventListener('click',renderTotal);
renderWorks('filters-block');
</script>
</body>
</html>
|
С опциями, которые экраны-уголки-счетчики, разбирайся сам. Никаких признаков множественного выбора в предоставленных данных не было. Что в каментах написано - то не данные, а каменты. Но главное с хера ли они вообще в товаре. Разбирайся. Теперь все нормализовано.
|
| Часовой пояс GMT +3, время: 18:25. |