javascript - 使用 jQuery 计算元素总和

Question

我正在尝试对data-item-rate中的元素求和。

实际上，当您点击某个商品的 Oui 时，它会将其添加到页面底部的购物车中。当您点击Non时，会将其从购物车中删除并重新计算总数。

但是，如果您从购物车中删除所有商品，然后添加新商品，则总数将显示 NaN。

你知道为什么吗？

$(document).ready(function() {

    $('li.nav-item').click(function() {

        id = $(this).data('id');
        name = $(this).data('name');
        rate = $(this).data('rate');
        value = $(this).data('value');
       
        if(rate == "No") {
            if(parseInt(value) < 0) {
                $(this).data('value',0);
            }
        }
        else {  
            var dataval = "-"+value;
            $(this).siblings('li').data('value',dataval);
        }

        $('#' + id + '_name').empty();
        $('#' + id + '_rate').empty();
        $('#' + id + '_rate').attr('data-item-rate', 0);

        if(parseInt(value) > 0) {
            value_sign = '$' + value;

            $('#' + id + '_name').html('<strong>' + name + '</strong>');
            $('#' + id + '_rate').html(value_sign);
            $('#' + id + '_rate').attr('data-item-rate', value);
        }
        updateTotal(value);
    });

    // Update the total
    function updateTotal(value) {

        /*var total = 0;

        $('p[data-item-rate]').each(function() {
            total += isNaN(parseInt($(this).data('item-rate'))) ? 0 : parseInt($(this).data('item-rate'));
            
        });
        total = total + ' $';*/
        var total = $('#total_estimate').html();
        total = total.split(" ");
        total = parseInt(total[0]) + parseInt(value) + " $"
        $('#total_estimate').html(total);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="row gap-y">
    <div class="col-lg-8 sticky">
        <div class="row">
            <div class="col-lg-6">
                <h2>Site bilingue</h2>
            </div>
            <div class="col-lg-6">
                <ul class="nav nav-tabs-outline">
                    <li class="nav-item" data-id="bilingual" data-name="Site bilingue" data-rate="Non" data-value="0">
                        <a class="nav-link" data-toggle="tab" href="#">
                        Non
                        </a>
                    </li>
                    <li class="nav-item" data-id="bilingual" data-name="Site bilingue" data-rate="Oui" data-value="50">
                        <a class="nav-link active" data-toggle="tab" href="#">
                        Oui
                        <span class="badge badge-secondary">+ 50 $</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-12">
                <p class="lead">
                    Lorem ipsum...
                </p>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-lg-6">
                <h2>Nom de domaine</h2>
            </div>
            <div class="col-lg-6">
                <ul class="nav nav-tabs-outline">
                    <li class="nav-item" data-id="domain" data-name="Nom de domaine" data-rate="Non" data-value="0">
                        <a class="nav-link active" data-toggle="tab" href="#">
                        Non
                        </a>
                    </li>
                    <li class="nav-item" data-id="domain" data-name="Nom de domaine" data-rate="Oui" data-value="50">
                        <a class="nav-link " data-toggle="tab" href="#">
                        Oui
                        <span class="badge badge-secondary">+ 50 $</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-12">
                <p class="lead">
                    Lorem ipsum...
                </p>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="cart-price">
            <div class="flexbox">
                <div>
                    <p id="bilingual_name"></p>
                    <p id="domain_name"></p>
                    <p id="hosting_name"></p>
                    <p id="ssl_name"></p>
                    <p id="gmaps_name"></p>
                    <p id="admin_name"></p>
                    <p id="ga_name"></p>
                    <p id="catalogue_name"></p>
                    <p id="online-store_name"></p>
                    <p id="blog_name"></p>
                    <p id="gallery_name"></p>
                    <p id="contact-form_name"></p>
                    <p id="newsletter_name"></p>
                </div>
                <div>
                    <p id="bilingual_rate" data-item-rate="0"></p>
                    <p id="domain_rate" data-item-rate="0"></p>
                    <p id="hosting_rate" data-item-rate="0"></p>
                    <p id="ssl_rate" data-item-rate="0"></p>
                    <p id="gmaps_rate" data-item-rate="0"></p>
                    <p id="admin_rate" data-item-rate="0"></p>
                    <p id="ga_rate" data-item-rate="0"></p>
                    <p id="catalogue_rate" data-item-rate="0"></p>
                    <p id="online-store_rate" data-item-rate="0"></p>
                    <p id="blog_rate" data-item-rate="0"></p>
                    <p id="gallery_rate" data-item-rate="0"></p>
                    <p id="contact-form_rate" data-item-rate="0"></p>
                    <p id="newsletter_rate" data-item-rate="0"></p>
                </div>
            </div>
            <hr>
            <div class="flexbox">
                <div>
                    <p><strong>Total:</strong></p>
                </div>
                <div>
                    <p class="fw-600" id="total_estimate">0 $</p>
                </div>
            </div>
        </div>
    </div>
</form>

Answer 1

您的值为"--0"并且无法解析为数字。

可以编写一个要删除的函数，将其替换为 value = removeDuplicates(value.toString());

function removeDuplicates(str){
  return [...new Set(str.split('-'))].join('-');
}



// Update the total
    function updateTotal(value) {
        value = value.replace('--', '-');
        /*var total = 0;

        $('p[data-item-rate]').each(function() {
            total += isNaN(parseInt($(this).data('item-rate'))) ? 0 : parseInt($(this).data('item-rate'));

        });
        total = total + ' $';*/
        var total = $('#total_estimate').html();
        total = total.split(" ");
        total = parseInt(total[0]) + parseInt(value) + " $"
        $('#total_estimate').html(total);
    }

$(document).ready(function() {

    $('li.nav-item').click(function() {

        id = $(this).data('id');
        name = $(this).data('name');
        rate = $(this).data('rate');
        value = $(this).data('value');
       
        if(rate == "No") {
            if(parseInt(value) < 0) {
                $(this).data('value',0);
            }
        }
        else {  
            var dataval = "-"+value;
            $(this).siblings('li').data('value',dataval);
        }

        $('#' + id + '_name').empty();
        $('#' + id + '_rate').empty();
        $('#' + id + '_rate').attr('data-item-rate', 0);

        if(parseInt(value) > 0) {
            value_sign = '$' + value;

            $('#' + id + '_name').html('<strong>' + name + '</strong>');
            $('#' + id + '_rate').html(value_sign);
            $('#' + id + '_rate').attr('data-item-rate', value);
        }
        updateTotal(value);
    });

    // Update the total
    function updateTotal(value) {
        value = removeDuplicates(value.toString());
        /*var total = 0;

        $('p[data-item-rate]').each(function() {
            total += isNaN(parseInt($(this).data('item-rate'))) ? 0 : parseInt($(this).data('item-rate'));
            
        });
        total = total + ' $';*/
        var total = $('#total_estimate').html();
        total = total.split(" ");
        total = parseInt(total[0]) + parseInt(value) + " $"
        $('#total_estimate').html(total);
    }
});

function removeDuplicates(str){
  return [...new Set(str.split('-'))].join('-');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="row gap-y">
    <div class="col-lg-8 sticky">
        <div class="row">
            <div class="col-lg-6">
                <h2>Site bilingue</h2>
            </div>
            <div class="col-lg-6">
                <ul class="nav nav-tabs-outline">
                    <li class="nav-item" data-id="bilingual" data-name="Site bilingue" data-rate="Non" data-value="0">
                        <a class="nav-link" data-toggle="tab" href="#">
                        Non
                        </a>
                    </li>
                    <li class="nav-item" data-id="bilingual" data-name="Site bilingue" data-rate="Oui" data-value="50">
                        <a class="nav-link active" data-toggle="tab" href="#">
                        Oui
                        <span class="badge badge-secondary">+ 50 $</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-12">
                <p class="lead">
                    Lorem ipsum...
                </p>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-lg-6">
                <h2>Nom de domaine</h2>
            </div>
            <div class="col-lg-6">
                <ul class="nav nav-tabs-outline">
                    <li class="nav-item" data-id="domain" data-name="Nom de domaine" data-rate="Non" data-value="0">
                        <a class="nav-link active" data-toggle="tab" href="#">
                        Non
                        </a>
                    </li>
                    <li class="nav-item" data-id="domain" data-name="Nom de domaine" data-rate="Oui" data-value="50">
                        <a class="nav-link " data-toggle="tab" href="#">
                        Oui
                        <span class="badge badge-secondary">+ 50 $</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-12">
                <p class="lead">
                    Lorem ipsum...
                </p>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="cart-price">
            <div class="flexbox">
                <div>
                    <p id="bilingual_name"></p>
                    <p id="domain_name"></p>
                    <p id="hosting_name"></p>
                    <p id="ssl_name"></p>
                    <p id="gmaps_name"></p>
                    <p id="admin_name"></p>
                    <p id="ga_name"></p>
                    <p id="catalogue_name"></p>
                    <p id="online-store_name"></p>
                    <p id="blog_name"></p>
                    <p id="gallery_name"></p>
                    <p id="contact-form_name"></p>
                    <p id="newsletter_name"></p>
                </div>
                <div>
                    <p id="bilingual_rate" data-item-rate="0"></p>
                    <p id="domain_rate" data-item-rate="0"></p>
                    <p id="hosting_rate" data-item-rate="0"></p>
                    <p id="ssl_rate" data-item-rate="0"></p>
                    <p id="gmaps_rate" data-item-rate="0"></p>
                    <p id="admin_rate" data-item-rate="0"></p>
                    <p id="ga_rate" data-item-rate="0"></p>
                    <p id="catalogue_rate" data-item-rate="0"></p>
                    <p id="online-store_rate" data-item-rate="0"></p>
                    <p id="blog_rate" data-item-rate="0"></p>
                    <p id="gallery_rate" data-item-rate="0"></p>
                    <p id="contact-form_rate" data-item-rate="0"></p>
                    <p id="newsletter_rate" data-item-rate="0"></p>
                </div>
            </div>
            <hr>
            <div class="flexbox">
                <div>
                    <p><strong>Total:</strong></p>
                </div>
                <div>
                    <p class="fw-600" id="total_estimate">0 $</p>
                </div>
            </div>
        </div>
    </div>
</form>