jquery - 使用 jQuery 求和元素

Question

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

实际上，如果您对第一项(照片库)单击"is"，则全部有效。总计显示 300 $。

但是，之后，如果您对第二个或第三个选择是，则求和不起作用。

如果我点击否，总和 #total_estimate 应该删除已删除的项目。

我认为问题就在附近:

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

你知道为什么吗？

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

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

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

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

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

    updateTotal();
});

// Update the total
function updateTotal() {

    var total = 0;

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

    total = total + ' $';

    $('#total_estimate').html(total);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-8">
    <div class="row">
        <div class="col-lg-6">
            <h2>Photos gallery</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="gallery" data-name="Photos gallery" data-rate="No" data-value="0">
                    <a class="nav-link active" data-toggle="tab" href="#">
                    No
                    </a>
                </li>
                <li class="nav-item" data-id="gallery" data-name="Galerie photos" data-rate="Yes" data-value="300">
                    <a class="nav-link " data-toggle="tab" href="#">
                    Yes
                    <span class="badge badge-secondary">+ 300 $</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-lg-6">
            <h2>Contact form</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="contact-form" data-name="Contact form" data-rate="No" data-value="0">
                    <a class="nav-link active" data-toggle="tab" href="#">
                    No
                    </a>
                </li>
                <li class="nav-item" data-id="contact-form" data-name="Formulaire de contact" data-rate="Yes" data-value="250">
                    <a class="nav-link " data-toggle="tab" href="#">
                    Yes
                    <span class="badge badge-secondary">+ 250 $</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-lg-6">
            <h2>Newsletter</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="newsletter" data-name="Abonnement infolettre" data-rate="No" data-value="0">
                    <a class="nav-link active" data-toggle="tab" href="#">
                    No
                    </a>
                </li>
                <li class="nav-item" data-id="newsletter" data-name="Abonnement infolettre" data-rate="Yes" data-value="250">
                    <a class="nav-link " data-toggle="tab" href="#">
                    Yes
                    <span class="badge badge-secondary">+ 250 $</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <hr>
</div>



<div class="col-lg-4">
    <div class="cart-price">
        <div class="flexbox">
            <div>
                <p id="gallery_name"></p>
                <p id="gallery_rate" data-item-rate="0"></p>
                <hr />
                <p id="contact-form_name"></p>
                <p id="contact-form_rate" data-item-rate="0"></p>
                <hr />
                <p id="newsletter_name"></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>

Answer 1

通过使用 if 条件将数据值设置为“否”并更改 updateall() 函数，如下所示

$('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>
<div class="col-lg-8">
    <div class="row">
        <div class="col-lg-6">
            <h2>Photos gallery</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="gallery" data-name="Photos gallery" data-rate="No" data-value="0">
                    <a class="nav-link active" data-toggle="tab" href="#">
                    No
                    </a>
                </li>
                <li class="nav-item" data-id="gallery" data-name="Galerie photos" data-rate="Yes" data-value="300">
                    <a class="nav-link " data-toggle="tab" href="#">
                    Yes
                    <span class="badge badge-secondary">+ 300 $</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-lg-6">
            <h2>Contact form</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="contact-form" data-name="Contact form" data-rate="No" data-value="0">
                    <a class="nav-link active" data-toggle="tab" href="#">
                    No
                    </a>
                </li>
                <li class="nav-item" data-id="contact-form" data-name="Formulaire de contact" data-rate="Yes" data-value="250">
                    <a class="nav-link " data-toggle="tab" href="#">
                    Yes
                    <span class="badge badge-secondary">+ 250 $</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-lg-6">
            <h2>Newsletter</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="newsletter" data-name="Abonnement infolettre" data-rate="No" data-value="0">
                    <a class="nav-link active" data-toggle="tab" href="#">
                    No
                    </a>
                </li>
                <li class="nav-item" data-id="newsletter" data-name="Abonnement infolettre" data-rate="Yes" data-value="250">
                    <a class="nav-link " data-toggle="tab" href="#">
                    Yes
                    <span class="badge badge-secondary">+ 250 $</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <hr>
</div>



<div class="col-lg-4">
    <div class="cart-price">
        <div class="flexbox">
            <div>
                <p id="gallery_name"></p>
                <p id="gallery_rate" data-item-rate="0"></p>
                <hr />
                <p id="contact-form_name"></p>
                <p id="contact-form_rate" data-item-rate="0"></p>
                <hr />
                <p id="newsletter_name"></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>