Question

我想对包含类li的{{1}}的所有a元素求和。

使用我输入的实际代码，在以下情况下应输出active：

项目1处于活动状态（相当于$ 50）。
第2项处于活动状态（相当于$ 250）。
第3项处于活动状态（相当于$ 75）。

请问我到底有什么错误？

就像完成总数一样，但是一按之后。

谢谢。

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

function updateTotal(value) {
    var total = 0;
    $('a.active').each(function(){
        total += isNaN(parseInt($(this).parent().data('value'))) ? 0 : parseInt($(this).parent().data('value'));
    });
    $('#total').html(total);
}

Answer 1

可能不是您要查找的内容，但稍加修改即可为所有被选中“是”且处于活动状态的用户提供总计。

$('li.nav-item').click(function() {
    $(this).closest("ul").find('a').removeClass("active");
    $(this).closest("ul").find('i').hide();
    $(this).find("a").addClass("active");
    $(this).find("i").show();
    updateTotal();
});
$('li.nav-item:nth-child(2) .fa-check').css("display","none");

function updateTotal() {
    var total = 0;
    $('a.active').each(function(){
        total += isNaN(parseInt($(this).parent().data('value'))) ? 0 : parseInt($(this).parent().data('value'));
    });
    $('#total').html(total);
}

updateTotal();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" />

Total: 
<div id="total"></div>

<div class="col-lg-8">
    <div class="row">
        <div class="col-lg-6">
            <h2>Item 1 - $50</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="item_1" data-name="Item 1" data-rate="No" data-value="0">
                    <a class="nav-link" data-toggle="tab" href="#">
                    No
                    </a><i class="fas fa-check"></i>
                </li>
                <li class="nav-item" data-id="item_1" data-name="Item 1" data-rate="Yes" data-value="50">
                    <a class="nav-link" data-toggle="tab" href="#">
                    Yes
                    </a><i class="fas fa-check"></i>
                </li>
            </ul>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-lg-6">
            <h2>Item 2 - $250</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="item_2" data-name="Item 2" data-rate="No" data-value="0">
                    <a class="nav-link" data-toggle="tab" href="#">
                    No
                    </a><i class="fas fa-check"></i>
                </li>
                <li class="nav-item" data-id="item_2" data-name="Item 2" data-rate="Yes" data-value="250">
                    <a class="nav-link" data-toggle="tab" href="#">
                    Yes
                    </a><i class="fas fa-check"></i>
                </li>
            </ul>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-lg-6">
            <h2>Item 3 - $75</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="item_3" data-name="Item 3" data-rate="No" data-value="0">
                    <a class="nav-link" data-toggle="tab" href="#">
                    No
                    </a><i class="fas fa-check"></i>
                </li>
                <li class="nav-item" data-id="item_3" data-name="Item 3" data-rate="Yes" data-value="75">
                    <a class="nav-link" data-toggle="tab" href="#">
                    Yes
                    </a><i class="fas fa-check"></i>
                </li>
            </ul>
        </div>
    </div>
</div>

用jQuery汇总项目onClick

1 个答案: