Question

我正面临一个奇怪的问题。

在单击按钮Yes或No时，我正在尝试执行一项功能以对项目列表中的值求和。

这是一个有效的示例： https://jsfiddle.net/k4b1awgp/

$('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");

这是不起作用的示例： https://jsfiddle.net/ceuL8p1k/

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

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();

在此示例中，除非我再次单击Yes或No，否则它将无法正常工作。

你知道为什么吗？

我需要放置一个sleep类似的PHP函数吗？

感谢您的帮助。

Answer 1

根据documentation：

shown.bs.tab ：显示标签后，此事件在标签显示上触发。使用event.target 和event.relatedTarget分别定位到活动标签和上一个活动标签（如果有）。

因此，我建议将您的点击事件处理程序更改为：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    updateTotal();
});

无需添加延迟。切换发生后，足以运行您的功能。

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);
}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    updateTotal();
});
updateTotal();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" >

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 active" data-toggle="tab" href="#">
                        No
                    </a>
                </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>
                </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 active" data-toggle="tab" href="#">
                        No
                    </a>
                </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>
                </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 active" data-toggle="tab" href="#">
                        No
                    </a>
                </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>
                </li>
            </ul>
        </div>
    </div>
</div>

使用jQuery单击和执行功能之间的延迟

1 个答案: