Калькулятор+смена стиля

@KRussky · Регистрация: 11.02.2017

Author24 — интернет-сервис помощи студентам

Всем привет, профессионалы. Ломаю голову как сделать такую штуку:
1. Представьте div блоки в виде плитки
2. При клике по блоку div допустим, добавляется css border 1px solid black
3. Далее, калькулятор, если выбрать этот блок, то цена 10р, если другой, то цена 20р (к примеру)
4. Так же, допустим 2 ряда блоков div по 3 штуки в строчку, допустим с 1-го ряда можно выбрать только 1 (один) блок, а со второго уже любой
То есть допустим, 1-ый ряд div1 = 10р, div2 = 20р, div3 = 30р, то можно выбрать только один и цена должна быть только одна
Со второго ряда можно выбрать любой, если div4 -> +10р, если div5 -> +15р, div6 -> +20р

Думаю, такое осуществить вполне можно, только вообще не понимаю как.
Пробовал смену стилей по клику на js, не особо выходит, но более менее разобрался.
А вот с калькулятором беда, не особо разобрался.

Буду рад банально самым простым примерам.

Добавлено через 12 минут
Ах да, по мимо этого, блоки DIV должны содержать отправку формы, в принципе ее можно просто скрыть методом hidden, ну, то есть должен идти POST запрос, не к каждому блоку, а потом, ко всем вместе, ну для оформления заказа.

@kalabuni · 12.02.2017, 00:21

как-то очень туманно
давайте поподробнее:
1. размеры блоков одинаковые?
2. сколько блоков в ряду?
3. сколько всего рядов?
4. ограничение количества выбора блоков в ряду должно быть текстовым и программным, или только программным?
5. функциональность калькулятора вам будет проще объяснить, если вы расскажете о конкретике -- что это за блоки по сути -- какой это калькулятор?

@KRussky · 12.02.2017, 00:59 **[ТС]**

1. Да, у меня ширина блока 160px, в строке 3 блока (но, все зависит от разрешения дисплея, но это опустим)
2. 3 блока в ряду/строке
3. 5 рядов + checkbox-ы, 1-ый ряд блоки div с input text, их трогать не надо, следующие 3 ряда идут блоки типа категории, ну, допустим материал, то есть эти 3 ряда содержат 8 блоков из которых можно выбрать только 1.
То есть допустим если мы выбрали 1-ый блок и к нему добавился border, то когда мы выбираем 2-ой блок, то у первого должен стать стандартный css, а border добавиться ко 2-ому блоку.
Следующий ряд содержит 3 блока и каждый из них можно выбрать.

4. Думаю текстовым, так как программным не нужно.
5. Ну вот смотрите
Вот те ряды, где много блоков и можно выбрать только один, по сути должно быть select, где каждый блок содержит value - 1, 2, 3, 4,...
Value я могу в hidden поместить, так как мне надо это все отправить будет в виде формы

То есть по сути, если представить в виде обычной формы, то у меня так:
- input text, input text, input text
- select, value 0,1,2,3,4,5,10,120
- checkbox1, checkbox2, checkbox3
- потом идет список стран, где надо выбрать необходимую, можно выбрать несколько (эту фишку можно не трогать)
- ну и всё, хотя еще хочу добавить 2 блока, один будет выводить сумму ИТОГО, а второй checkbox типа соглашаюсь с условиями или правилами

То есть берем только 8 блоков с категориями и 3 блока с дополнительными функциями.
Они должны содержать цену и передавать её в калькулятор и выводить в отдельном блоке итог

Добавлено через 11 минут
Еще проще:
у меня 11 блоков DIV, в 8 из них сейчас input radio с одинаковым name, а 3 другие содержат checkbox
Я хочу просто убрать клик по кружочку или квадратику, а сделать чтобы допустим у меня блок DIV 160x50 содержит текст, фон, картинку, чтобы при клики по нему выполнялся тот же самый selected или checked
И добавить к этим блокам калькулятор, чтобы выводилась общая сумма.

То есть по сути я беру и прячу input в hidden, далее JS -> клик DIV -> #name1 -> установка border у #name1
если будет повторный клик по #name1 -> убираем border
если будет клик по #name2-#name8 -> убираем border у #name1 и добавляем к #nameX
Остальные 3 DIV -> установка и снятие border (принцип checkbox)
Потом, каждый блок #nameX содержит цену и при изменении выбора блоков DIV должна меняться сумма общая
И выводить эту сумму с помощью JS, то есть если мы выбрали другой DIV блок, то цена должна меняться онлайн, вывести цену допустим в тег <b></b>

Добавлено через 1 минуту
Цену DIV блока надо прописать в JS калькуляторе, допустим #name1 = 10р, #name2 = 20р и тд

Добавлено через 8 минут
Пример: допустим дата-центер
8 типов хостингов
3 дополнительные функции

Заходит такой клиент, кликает по тарифному плану HOST-5 (тут такая анимация, выдвижение вперед, насыщеннее цвета)
Ниже: - Доп. IP адрес
- Доп. SSD
- Авто-бэкап
Такой подумал, подумал, дайка я выберу Авто-бэкап и может SSD выберу тоже)))
Ну и дальше кнопка: перейти к оплате заказа или типа того

Добавлено через 1 минуту
Ах, да, ему там ниже типа: Общая стоимость - ХХХ руб.

@ShadowKing · 12.02.2017, 08:19

Если я правильно понял задание, то вот вам пример подобной реализации:

HTML5

<br>
<div cost='11' class='checkDiv'></div>
<div cost='12' class='checkDiv'></div>
<div cost='13' class='checkDiv'></div>
<br>
<div cost='21' class='checkDiv'></div>
<div cost='22' class='checkDiv'></div>
<div cost='23' class='checkDiv'></div>
<br>
<div cost='31' class='checkDiv'></div>
<div cost='32' class='checkDiv'></div>
<div cost='33' class='checkDiv'></div>
<br>
 
<h1 id='currentSum'>Текущая стоимость: 0</h1>
 
 
<br>
<div cost='11' class='radioDiv'></div>
<div cost='12' class='radioDiv'></div>
<div cost='13' class='radioDiv'></div>
<br>
<div cost='21' class='radioDiv'></div>
<div cost='22' class='radioDiv'></div>
<div cost='23' class='radioDiv'></div>
<br>
<div cost='31' class='radioDiv'></div>
<div cost='32' class='radioDiv'></div>
<div cost='33' class='radioDiv'></div>
<br>
 
<h1 id='currentSum2'>Текущая стоимость: 0</h1>

Javascript

var divs = document.getElementsByClassName('checkDiv');
 
for (var i = 0; i < divs.length; i++) divs[i].addEventListener('click', update)
var divs = document.getElementsByClassName('radioDiv');
 
for (i = 0; i < divs.length; i++) divs[i].addEventListener('click', update2)
 
var sum = 0;
 
function update(e) {
    var cost = parseFloat(e.srcElement.getAttribute('cost'));
    if (e.srcElement.getAttribute('selected') === 'true') {
    sum -= cost;
    e.srcElement.setAttribute('selected', 'false');
    e.srcElement.style.background = 'white';
    e.srcElement.style.border = '1px solid gray';
  } else {
    sum += cost;
    e.srcElement.setAttribute('selected', 'true');
    e.srcElement.style.background = 'red';
    e.srcElement.style.border = '3px solid green';
  }
  document.getElementById('currentSum').innerText = "Текущая стоимость: " + sum;
}
 
var lastDiv
 
function update2(e) {
     if (lastDiv) {
     lastDiv.style.background = 'white';
     lastDiv.style.border = '1px solid gray';
   }
    e.srcElement.style.background = 'red';
    e.srcElement.style.border = '3px solid green';
  document.getElementById('currentSum2').innerText = "Текущая стоимость: " + parseFloat(e.srcElement.getAttribute('cost'));
  lastDiv = e.srcElement;
}

Пример на jsfiddle.
Если будут вопросы - задавайте.

@KRussky · 12.02.2017, 08:26 **[ТС]**

ShadowKing, вообще красота! большое спасибо!!!!)))
А можно только сделать сумму общую? currentSum + currentSum2

Добавлено через 1 минуту
Буду сейчас пробовать к своему коды прикручивать)))

@ShadowKing · 12.02.2017, 08:36

Да, можно. Тогда убираем второй h1, заменяем во второй функции id на curentSum и добавляем переменную sum 2.
Итог:

Javascript

var divs = document.getElementsByClassName('checkDiv');
 
for (var i = 0; i < divs.length; i++) divs[i].addEventListener('click', update)
var divs = document.getElementsByClassName('radioDiv');
 
for (i = 0; i < divs.length; i++) divs[i].addEventListener('click', update2)
 
var sum = 0, sum2 = 0;
 
function update(e) {
    var cost = parseFloat(e.srcElement.getAttribute('cost'));
    if (e.srcElement.getAttribute('selected') === 'true') {
    sum -= cost;
    e.srcElement.setAttribute('selected', 'false');
    e.srcElement.style.background = 'white';
    e.srcElement.style.border = '1px solid gray';
  } else {
    sum += cost;
    e.srcElement.setAttribute('selected', 'true');
    e.srcElement.style.background = 'red';
    e.srcElement.style.border = '3px solid green';
  }
  document.getElementById('currentSum').innerText = "Текущая стоимость: " + (sum + sum2);
}
 
var lastDiv
 
function update2(e) {
     if (lastDiv) {
     lastDiv.style.background = 'white';
     lastDiv.style.border = '1px solid gray';
   }
   if (lastDiv == e.srcElement) {
        sum2 = 0; 
      lastDiv = null;
  } else {
    e.srcElement.style.background = 'red';
    e.srcElement.style.border = '3px solid green';
    sum2 = parseFloat(e.srcElement.getAttribute('cost'));
    lastDiv = e.srcElement;
  }
  document.getElementById('currentSum').innerText = "Текущая стоимость: " + (sum + sum2);
}

Пример на jsfiddle.

@KRussky · 12.02.2017, 10:01 **[ТС]**

А еще смотрите такая штука, может посоветуете, каждый checkDIV содержит уникальное input name
А вот radioDiv содержит одинаковые input name
То есть, мне надо как-то еще сделать привязку POST['nameCheck1'], POST['nameCheck2'] и тд, и POST['nameradio']
То есть до этого у меня были input-ы, все input-ы check передают только значение 1, то есть, если выбран DIV - то 1, если нет, то 0
А вот input radioDIV содержит цифры, типа value='1', value='2', value='10', value='100' и тд

Добавлено через 13 минут
sumbit отдельной кнопкой)

Добавлено через 13 минут
еще такая штука, к примеру

HTML5

1	<div cost='11' class='checkDiv'></div>

имеет

CSS

1	width:100px;height:100px;

в этом теге DIV содержаться еще div или img, похоже любой тег, так когда кликаешь по тегу img к примеру, то вокруг него рамка появляется и сумма выводится NoNe, то есть внутренние элементы в теге div class checkdiv или radiodiv тоже можно активно выбирать и калькулятор приводит ошибку, как их отключить?

То есть мне нужно, чтобы только основной тег выбирался, а внутренние были неактивны

Добавлено через 51 минуту
Ладно, не буду уже грузить, буду пробовать, экспериментировать, спасибо за толковый пример

@KRussky 0 / 0 / 0 Регистрация: 11.02.2017 Сообщений: 22
		1
	Калькулятор+смена стиля 12.02.2017, 00:01. Показов 1514. Ответов 6 Метки нет (Все метки) Всем привет, профессионалы. Ломаю голову как сделать такую штуку: 1. Представьте div блоки в виде плитки 2. При клике по блоку div допустим, добавляется css border 1px solid black 3. Далее, калькулятор, если выбрать этот блок, то цена 10р, если другой, то цена 20р (к примеру) 4. Так же, допустим 2 ряда блоков div по 3 штуки в строчку, допустим с 1-го ряда можно выбрать только 1 (один) блок, а со второго уже любой То есть допустим, 1-ый ряд div1 = 10р, div2 = 20р, div3 = 30р, то можно выбрать только один и цена должна быть только одна Со второго ряда можно выбрать любой, если div4 -> +10р, если div5 -> +15р, div6 -> +20р Думаю, такое осуществить вполне можно, только вообще не понимаю как. Пробовал смену стилей по клику на js, не особо выходит, но более менее разобрался. А вот с калькулятором беда, не особо разобрался. Буду рад банально самым простым примерам. Добавлено через 12 минут Ах да, по мимо этого, блоки DIV должны содержать отправку формы, в принципе ее можно просто скрыть методом hidden, ну, то есть должен идти POST запрос, не к каждому блоку, а потом, ко всем вместе, ну для оформления заказа. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	12.02.2017, 00:21	2
	как-то очень туманно давайте поподробнее: 1. размеры блоков одинаковые? 2. сколько блоков в ряду? 3. сколько всего рядов? 4. ограничение количества выбора блоков в ряду должно быть текстовым и программным, или только программным? 5. функциональность калькулятора вам будет проще объяснить, если вы расскажете о конкретике -- что это за блоки по сути -- какой это калькулятор? 0

@KRussky 0 / 0 / 0 Регистрация: 11.02.2017 Сообщений: 22
	12.02.2017, 00:59 [ТС]	3
	1. Да, у меня ширина блока 160px, в строке 3 блока (но, все зависит от разрешения дисплея, но это опустим) 2. 3 блока в ряду/строке 3. 5 рядов + checkbox-ы, 1-ый ряд блоки div с input text, их трогать не надо, следующие 3 ряда идут блоки типа категории, ну, допустим материал, то есть эти 3 ряда содержат 8 блоков из которых можно выбрать только 1. То есть допустим если мы выбрали 1-ый блок и к нему добавился border, то когда мы выбираем 2-ой блок, то у первого должен стать стандартный css, а border добавиться ко 2-ому блоку. Следующий ряд содержит 3 блока и каждый из них можно выбрать. 4. Думаю текстовым, так как программным не нужно. 5. Ну вот смотрите Вот те ряды, где много блоков и можно выбрать только один, по сути должно быть select, где каждый блок содержит value - 1, 2, 3, 4,... Value я могу в hidden поместить, так как мне надо это все отправить будет в виде формы То есть по сути, если представить в виде обычной формы, то у меня так: - input text, input text, input text - select, value 0,1,2,3,4,5,10,120 - checkbox1, checkbox2, checkbox3 - потом идет список стран, где надо выбрать необходимую, можно выбрать несколько (эту фишку можно не трогать) - ну и всё, хотя еще хочу добавить 2 блока, один будет выводить сумму ИТОГО, а второй checkbox типа соглашаюсь с условиями или правилами То есть берем только 8 блоков с категориями и 3 блока с дополнительными функциями. Они должны содержать цену и передавать её в калькулятор и выводить в отдельном блоке итог Добавлено через 11 минут Еще проще: у меня 11 блоков DIV, в 8 из них сейчас input radio с одинаковым name, а 3 другие содержат checkbox Я хочу просто убрать клик по кружочку или квадратику, а сделать чтобы допустим у меня блок DIV 160x50 содержит текст, фон, картинку, чтобы при клики по нему выполнялся тот же самый selected или checked И добавить к этим блокам калькулятор, чтобы выводилась общая сумма. То есть по сути я беру и прячу input в hidden, далее JS -> клик DIV -> #name1 -> установка border у #name1 если будет повторный клик по #name1 -> убираем border если будет клик по #name2-#name8 -> убираем border у #name1 и добавляем к #nameX Остальные 3 DIV -> установка и снятие border (принцип checkbox) Потом, каждый блок #nameX содержит цену и при изменении выбора блоков DIV должна меняться сумма общая И выводить эту сумму с помощью JS, то есть если мы выбрали другой DIV блок, то цена должна меняться онлайн, вывести цену допустим в тег <b></b> Добавлено через 1 минуту Цену DIV блока надо прописать в JS калькуляторе, допустим #name1 = 10р, #name2 = 20р и тд Добавлено через 8 минут Пример: допустим дата-центер 8 типов хостингов 3 дополнительные функции Заходит такой клиент, кликает по тарифному плану HOST-5 (тут такая анимация, выдвижение вперед, насыщеннее цвета) Ниже: - Доп. IP адрес - Доп. SSD - Авто-бэкап Такой подумал, подумал, дайка я выберу Авто-бэкап и может SSD выберу тоже))) Ну и дальше кнопка: перейти к оплате заказа или типа того Добавлено через 1 минуту Ах, да, ему там ниже типа: Общая стоимость - ХХХ руб. 0

@KRussky 0 / 0 / 0 Регистрация: 11.02.2017 Сообщений: 22
	12.02.2017, 08:26 [ТС]	5
	ShadowKing, вообще красота! большое спасибо!!!!))) А можно только сделать сумму общую? currentSum + currentSum2 Добавлено через 1 минуту Буду сейчас пробовать к своему коды прикручивать))) 0

	12.02.2017, 10:01

Опции темы

Калькулятор+смена стиля

Решение