Question

我有以下JQuery，允许用户选择/取消选择项目/价格列表作为创建自动报价的方式。代码如下所示：

$('table.products > tbody > tr').click(function(){
    if ($(this).find('div.price').is(":visible")) {
        $(this).find('div.price, img.selected').fadeOut(100);
    } else {
        $(this).siblings('div.price, img.selected').fadeIn(100);                    
    }
    recalc();
});

它实际上比那更复杂（因此我没有使用toggle()的原因，但上面只是一个简化的例子，用于这个问题。

无论如何，上面的代码工作正常。如果单击表格行，则根据价格是否已经显示的价格和图像进行选择/取消选择。

然后我在最后调用了一个名为recalc();的函数..它看起来像这样（再次，这是一个简化版本）：

function recalc() {
    var numOfProducts = $('table.products div.price:visible').length;
    alert(numOfProducts);
}

我遇到的问题是警报总是返回在更改任何内容之前本来正确的值。

例如，如果没有div.price可见且我选择了一个，则会看到一个，但警报会显示0。然后，如果我选择另一个，则会显示2，但警报仅显示1，因为这就是我点击时的状态。如果我单击其中一个已单击的项目以取消选择它，则会显示2

所以，我的问题是我应该如何确保函数调用在其他所有事情完成后发生？

Answer 1

这是因为在动画完成之前调用了recalc()，因此元素仍然可见。

您有两种选择。首先是摆脱动画：

$('table.products > tbody > tr').click(function(){
    if ($(this).find('div.price').is(":visible")) {
        $(this).find('div.price, img.selected').hide();
    } 
    else {
        $(this).siblings('div.price, img.selected').show();                    
    }
    recalc();
});

第二种是在每个淡入淡出的回调中调用recalc()，以便在动画完成后发生：

$('table.products > tbody > tr').click(function(){
    if ($(this).find('div.price').is(":visible")) {
        $(this).find('div.price, img.selected').fadeOut(100, recalc);
    }
    else {
        $(this).siblings('div.price, img.selected').fadeIn(100, recalc);                    
    }        
});

Answer 2

我得出的结论是我的做法完全错了。我的部分原因是，没有多少人提出这个问题的答案，部分原因是我收到的答案没有完成我想要做的事情。也许我的解释也不够明确。

因此，我对获得所选产品行数量的准确报告的原始问题的解决方案是在JS中创建一个全局变量：

window.config =
    {
        products : 0,
    };

然后，在if语句中添加行，根据发生的事情递增或递减变量：

$('table.products > tbody > tr').click(function(){
    window.config.products = window.config.products - 1; // Decrement
    if ($(this).find('div.price').is(":visible")) {
        $(this).find('div.price, img.selected').fadeOut(100);
    } else {
        window.config.products = window.config.products + 1; // Increment
        $(this).siblings('div.price, img.selected').fadeIn(100);                    
    }
});

现在，我可以准确记录全局变量中所选产品的数量，我可以随时访问该变量以继续开发我的应用程序。

提供旧数据的JQuery函数

2 个答案: