如何总结总的javascript jquery

Question

How can i sum up the total from my room price and for the add on price My code for addons and room booking js

$(document).ready(function() {
        $(".bkng").on("click",function(event) {
              event.preventDefault();

            var id = $(this).data('room-id');
          name = $(this).data('name');
        price = $(this).data('price');
                if(id != '')

                {
                    $.ajax(
                {
                    type:"POST",
                    url : "Pages/ajax",
                    data:{id:id,
                        name:name,
                        price:price},


                    success:function(data)
                    {
                        console.dir(data);
                        if (data) {


                        var item = $('<li data-itemprice="'+price+'">'+name+' : '+price+'</li>');
                            $("#test1").html(item);
Total();

Same for my addon js with its same data-itemprice

var item = $('<li data-itemprice="'+price+'">'+name+' : '+price+'</li>');
                            $("#test4").append(item);
Total();

my function for my total & how can i call the function to my html page?

function Total() {

           var total = 0;
         $('li').each(function(index,object){

         total = total + Number($(object).data('itemprice'))

   });

         $("#test2").html("Total:" + total);

    }

Here is the button html of my room and add ons Rooms:

<button data-name = "Single Room" data-price = "2750" class="bkng bkn-room trans_200" data-room-id ="1">BOOK NOW</button>

AddOns:

<button data-name = "Airport Transfer" data-price = "4300"  class="addons addon-btn trans_200" data-addon-id ="1">ADD TO MY STAY</button>

My html for the total price display

<h3 class = "your-stay" id = "test2">Total:<span></span></h3>

Answer 1

从ajax返回成功实现li标签后调用这个计算总函数。

Answer 2

 $(document).ready(function () { var total = 0 $('li').each(function (index, object) { total = total + Number($(object).data('itemprice')) }); $("span").html("Total:-" + total); }); function Total() { var total = 0 $('li').each(function (index, object) { total = total + Number($(object).data('itemprice')) }); $("span").html("Total:-" + total); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li data-itemprice='200'> Room 1 </li> <li data-itemprice='200'> Room2 </li> </ul> <span> Total</span> <button onclick="Total()">Calculate</button>

There are many way to use your javascript function like this

$("#button").click( function()
       {
         CalculateTotal();
       }
    );