Как сложить данные из группы?
Нужно в input id="modal_kids1" вставить общее количество из группы #btns
Сделал только так $('#modal_kids1').val(count);, но это не верно
const btnsVal = [];
function calcPrice() {
$('#tprice1 div').html(Math.trunc(+$('#price_old').val() * (1 + btnsVal.reduce((i, c) => i + c, 0) * 15 / 100)) + ' ₽'); // 15%
$('#price2').val(Math.trunc(+$('#price_old').val() * (1 + btnsVal.reduce((i, c) => i + c, 0) * 15 / 100))); // 15%
}
$(document).ready(function() {
// удалить кнопки чтобы не было повтора
document.querySelector("#btns").innerHTML = '';
$('#modal_kids1').val('');
const btns = $('#btns');
for (let i = 0; i < 3; i++) {
btnsVal.push(0);
btns.html(btns.html() + `<div class="quantity_inner">
<a href="javascript:;" class="clickBtn bt_minus z-depth-1 waves-effect">
-
</a>
<input type="text" value="0" class="quantity" data-max-count="2" data-min-count="0" data-idx="${i}" readonly>
<a href="javascript:;" class="clickBtn bt_plus z-depth-1 waves-effect">
+
</a>
</div>`);
}
$('.clickBtn').click(function() {
// Берем значение группы
let $input = $(this).parent().find('.quantity');
// Изменяем значение в зависимости от того, что это за кнопка, плюс или минус
let count = +$input.val() + ($(this).hasClass('bt_minus') ? -1 : 1);
$('#modal_kids1').val(count); // добавляем общее количество в input
// Проверяем, не выходит ли новое значение за допустимые пределы
if (+$input.data('min-count') <= count && +$input.data('max-count') >= count) {
// Если не выходит, меняем значение и пересчитываем
// начало изменений
const v = $input.data('idx')
$('#kids_count' + (v + 1)).val(count);
$input.val(count);
// конец изменений
btnsVal[v] = count;
calcPrice()
}
});
calcPrice();
})
input {
width: 330px;
}
.quantity_inner * {
box-sizing: border-box;
}
.quantity_inner {
display: flex;
justify-content: center;
}
.quantity_inner .bt_minus,
.quantity_inner .bt_plus,
.quantity_inner .quantity {
color: #BFE2FF;
height: 40px;
width: 40px;
padding: 0;
margin: 10px 2px;
border-radius: 10px;
border: 4px solid #BFE2FF;
background: #337AB7;
cursor: pointer;
outline: 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.2);
}
.quantity_inner .quantity {
width: 50px;
text-align: center;
font-size: 22px;
color: #FFF;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
.quantity_inner .bt_minus svg,
.quantity_inner .bt_plus svg {
stroke: #BFE2FF;
stroke-width: 4;
transition: 0.5s;
margin: 4px;
}
.quantity_inner .bt_minus:hover svg,
.quantity_inner .bt_plus:hover svg {
stroke: #FFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input id="modal_kids1" data-target="modal_kids" placeholder="Здесь должно быть общее количество из группы" name="modal_kids" type="text" value="" class="modal_kids modal-trigger">
<label for="modal_kids1" class="active">Детские кресла:</label>
<br>
<input name="price_old" id="price_old" type="hidden" value="320">
<input name="price2" id="price2" type="text" value="320">
<div id="tprice1" class="param__value"><div style="margin-right: 10px;color: #000;background: #ffca00;line-height: 21px;padding: 0 6px 0;border-radius: 4px;font-weight: 600;font-size: 14px;">320</div></div>
<div id="btns"></div>
Ответы (1 шт):
Автор решения: ksa
→ Ссылка
Нужно в input id="modal_kids1" вставить общее количество из группы #btns
Предложу такой вариант...
const btnsVal = [];
function calcPrice() {
$('#tprice1 div').html(Math.trunc(+$('#price_old').val() * (1 + btnsVal.reduce((i, c) => i + c, 0) * 15 / 100)) + ' ₽'); // 15%
$('#price2').val(Math.trunc(+$('#price_old').val() * (1 + btnsVal.reduce((i, c) => i + c, 0) * 15 / 100))); // 15%
}
$(document).ready(function() {
// удалить кнопки чтобы не было повтора
document.querySelector("#btns").innerHTML = '';
const trg = $('#modal_kids1')
trg.val('');
const btns = $('#btns');
btns.on('click', '.clickBtn', _ => {
let v = 0
btns.find('input').each((_, o) => v += +o.value)
trg.val(v ? v : '')
})
for (let i = 0; i < 3; i++) {
btnsVal.push(0);
btns.html(btns.html() + `<div class="quantity_inner">
<a href="javascript:;" class="clickBtn bt_minus z-depth-1 waves-effect">
-
</a>
<input type="text" value="0" class="quantity" data-max-count="2" data-min-count="0" data-idx="${i}" readonly>
<a href="javascript:;" class="clickBtn bt_plus z-depth-1 waves-effect">
+
</a>
</div>`);
}
$('.clickBtn').click(function() {
// Берем значение группы
let $input = $(this).parent().find('.quantity');
// Изменяем значение в зависимости от того, что это за кнопка, плюс или минус
let count = +$input.val() + ($(this).hasClass('bt_minus') ? -1 : 1);
/*
$('#modal_kids1').val(count); // добавляем общее количество в input
*/
// Проверяем, не выходит ли новое значение за допустимые пределы
if (+$input.data('min-count') <= count && +$input.data('max-count') >= count) {
// Если не выходит, меняем значение и пересчитываем
// начало изменений
const v = $input.data('idx')
$('#kids_count' + (v + 1)).val(count);
$input.val(count);
// конец изменений
btnsVal[v] = count;
calcPrice()
}
});
calcPrice();
})
input {
width: 330px;
}
.quantity_inner * {
box-sizing: border-box;
}
.quantity_inner {
display: flex;
justify-content: center;
}
.quantity_inner .bt_minus,
.quantity_inner .bt_plus,
.quantity_inner .quantity {
color: #BFE2FF;
height: 40px;
width: 40px;
padding: 0;
margin: 10px 2px;
border-radius: 10px;
border: 4px solid #BFE2FF;
background: #337AB7;
cursor: pointer;
outline: 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.2);
}
.quantity_inner .quantity {
width: 50px;
text-align: center;
font-size: 22px;
color: #FFF;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
.quantity_inner .bt_minus svg,
.quantity_inner .bt_plus svg {
stroke: #BFE2FF;
stroke-width: 4;
transition: 0.5s;
margin: 4px;
}
.quantity_inner .bt_minus:hover svg,
.quantity_inner .bt_plus:hover svg {
stroke: #FFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input id="modal_kids1" data-target="modal_kids" placeholder="Здесь должно быть общее количество из группы" name="modal_kids" type="text" value="" class="modal_kids modal-trigger">
<label for="modal_kids1" class="active">Детские кресла:</label>
<br>
<input name="price_old" id="price_old" type="hidden" value="320">
<input name="price2" id="price2" type="text" value="320">
<div id="tprice1" class="param__value"><div style="margin-right: 10px;color: #000;background: #ffca00;line-height: 21px;padding: 0 6px 0;border-radius: 4px;font-weight: 600;font-size: 14px;">320</div></div>
<div id="btns"></div>