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>

Answer 2

首先，您没有这种情况

if(rate == "No")

检查您的日期率

data-rate="Non"

此外，您使用了不同类型的数据，例如将Int添加到字符串中。而且，您始终需要声明变量

所以：

id = $(this).data('id');
name = $(this).data('name');
rate = $(this).data('rate');
value = $(this).data('value');

现在是这个：

var id = $(this).data('id');
var name = $(this).data('name');
var rate = $(this).data('rate');
var value = parseInt($(this).data('value'));

这是Codepen，我删除了部分代码，这与您提到的问题没有联系：

CodePen

如果有任何问题，我很乐意回答，谢谢。

Answer 3

只需将您的代码从`var dataval = "-"+value;`替换为`var dataval = -value;`，即可显示不包含`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>

关于代码的反馈：

即使我发现以下代码对该功能也没有用，因此您可以将其删除。

if(rate == "No") {
    if(parseInt(value) < 0) {
        $(this).data('value',0);
    }
}

jQuery

3 个答案:

只需将您的代码从`var dataval = "-"+value;`替换为`var dataval = -value;`，即可显示不包含`NAN`的值。

关于代码的反馈：

希望这可以按照您的要求进行。

jQuery

3 个答案:

只需将您的代码从var dataval = "-"+value;替换为var dataval = -value;，即可显示不包含NAN的值。

关于代码的反馈：

希望这可以按照您的要求进行。

只需将您的代码从`var dataval = "-"+value;`替换为`var dataval = -value;`，即可显示不包含`NAN`的值。