#javascript
Вопрос:
Я пытаюсь сложить два значения вместе, чтобы получить общую сумму на моей странице бронирования.
Пользователь выбирает службу с помощью переключателей, а затем может выбирать дополнительные службы с помощью флажков.
Я использую JavaScript для вычисления флажков и переключателей.
HTML
<div class="row" id="service_calculate">
@foreach($pricing as $price)
<div class="col-lg-4 col-md-6">
<div class="pricing-table border rounded bg-white text-center">
<h5 class="pricing-plan rounded-top text-uppercase bg-custom text-light p-3 mb-0">{{$price->service_name}}</h5>
<div class="price-value py-5 bg-light">
<h4 class="mb-0">£{{$price->service_cost}}</h4>
</div>
<div class="pricing-features p-4">
<div class="">
<label class="btn btn-outline-custom"><input type="radio" name="service" value="{{$price->service_cost}}"> Select {{$price->service_name}}</label>
</div>
</div>
</div>
<!--end table-->
</div>
<!--end col-->
@endforeach
</div>
<!--end row-->
<div id="calculate_additional">
<h4 class="mt-5 mb-2">Select Additional Work</h4>
@foreach($additional as $addition)
<div class="boxed-element mt-4">
<div class="boxed-style-1 border rounded p-4 mb-2">
<h5 class="text-muted">{{$addition->additional_work}} -- <span class="text-custom">£{{$addition->cost}}</span>
<label class="btn btn-custom float-right">
<input class="checkbox" type="checkbox" name="{{$addition->additional_work}}" value="{{$addition->cost}}"> Select</label></h5>
</div>
</div>
@endforeach
<div class="boxed-element mt-4">
<div class="boxed-style-shadow bg-light shadow border rounded p-4 mb-2">
<h5 class="text-muted" id="servicetotal">Total Service Cost
<span class="text-custom float-right">0</span></h5>
</div>
</div>
<div class="boxed-element mt-4">
<div class="boxed-style-shadow bg-light shadow border rounded p-4 mb-2">
<h5 class="text-muted" id="additionaltotal">Total Additional Cost
<span class="text-custom float-right">0</span></h5>
</div>
</div>
</div>
Скрипт
<script>
jQuery($ => {
const calcTotal = () => $checkboxess.filter(':checked').map((i, el) => parseFloat(el.value)).get().reduce((s, v) => s v, 0);
let $checkboxess = $("#service_calculate :radio").on('change', e => {
$("#servicetotal span").text(calcTotal().toFixed(2));
});
});
</script>
<script>
jQuery($ => {
const calcTotal = () => $radiobuttons.filter(':checked').map((i, el) => parseFloat(el.value)).get().reduce((s, v) => s v, 0);
let $radiobuttons = $("#calculate_additional :checkbox").on('change', e => {
$("#additionaltotal span").text(calcTotal().toFixed(2));
});
});
</script>
Вышесказанное работает нормально.
С чем я борюсь, так это с итогом, то есть с добавлением радиоприемников к флажкам:
#servicetotal #additionaltotal = #totalprice
Я пытался:
<script>
jQuery(document).ready(function($) {
var sertot = $("#servicetotal").html();
var addtot = $("#additionaltotal").html();
function addtotals(sertot, addtot) {
var sum = parseInt(sertot) parseInt(addtot);
return sum;
};
var sum = addtotals(sertot, addtot);
$("#totalprice span").append(sum);
});
</script>
Но я не получаю никаких выходных данных на своей странице.
<div class="boxed-element mt-4">
<div class="boxed-style-shadow bg-light shadow border rounded p-4 mb-2">
<h5 class="text-muted" id="totalprice">Grand Total
<span class="text-custom float-right">0</span></h5>
</div>
</div>
Если бы кто-нибудь мог указать мне правильное направление, я был бы очень признателен и заранее благодарю вас за любую помощь, которую вы можете оказать: o)
Комментарии:
1. Не могли бы вы добавить оригинальный HTML к вашему вопросу (только соответствующую часть) — это может позволить людям предложить более простой подход, чем тот, с которого вы начали. Редактировать: и для справки
html()
также вернет элементы html, а не только требуемое значение, см.: api.jquery.com/html )2. Отредактировано с помощью html
Ответ №1:
Если это массив, используйте это:
function stitchArray(arrarr){
var numArr = arrarr.length;
var total = [];
for(var i = 0; i < numArr; i ){
for(var j = 0; j < arrarr[i].length; j ){
total.push(arrarr[i][j]);
}
}
return(total);
}
var arr1 = ["I love coding",404,true,{name: "Joe", age: 90}];
var arr2 = [false,"hello world",9999,["derp","nah"]];
alert(stitchArray([arr1,arr2])); //[I love coding,404,true,[objectObject],false,hello world,9999,[derp,nah]]
Если это строка, используйте str1 str2
.
Если это объект, я не знаю.
Если это число, то их можно сложить вместе.
Если это что-то другое, пожалуйста, скажите мне, и, возможно, я мог бы найти способ.