更新一个元素后更新

我正在一个页面中，其中一个元素（'.item - itemprice'）通过另一个我不想触摸的函数来更新它的文本。我想要做的是获取另一个元素（'.header - itemprice'）进行更新，使其文本与第一个元素相匹配。更新一个元素后更新

不幸的是，似乎下面的处理程序比更新函数的行为更快。因此，标题或者与前面的文本保持一致，或者更改为空白字符串。有没有办法延迟最后一行直到第一个元素完成更新？

$('select').on('change', function() { 
    const headPrice = document.querySelector('.header--itemprice'); 
    const lowerPrice = document.querySelector('span.item--itemprice'); 
    const $lowerText = $(lowerPrice).text(); 
    $(headPrice).text($lowerText); 
});

下面是已经存在的功能：

$(document).ready(function() { 
    $('#txtQuantity, .ProductGroupItemQuantity').blur(updatePrice); 
}); 

function updatePrice() { 
    var itemPriceEl = $('.item--itemprice'); 
    var itemCountEl = $('#txtQuantity'); 
    var groupUpdateEl = $('#lnkProductGroupUpdatePrice'); 
    var groupPriceEl = $('.pdetail--price-total'); 
    var totalPriceEl = $('.ProductDetailsPricing'); 
    var itemPrice = moneyToNumber(itemPriceEl.text()); 
    var itemCount = moneyToNumber(itemCountEl.val()); 
    var itemTotalPrice = itemCount * itemPrice; 
    var groupTotalPrice = 0; 

    // Trigger Group Update 
    groupUpdateEl.click(); 
    groupTotalPrice = moneyToNumber(groupPriceEl.text()); 

    // Calculate Total Price 
    totalPriceEl.text('Total: $' + Number(groupTotalPrice + itemTotalPrice)/100); 
} 

/*$('select').on('change', function() { 
    const headPrice = document.querySelector('.header--itemprice'); 
    const lowerPrice = document.querySelector('span.item--itemprice'); 
    const $lowerText = $(lowerPrice).text(); 
    $(headPrice).text($lowerText); 
});*/ 

function moneyToNumber(moneyEl) { 
    try { 
    return Number(moneyEl.replace(/[^0-9\.]+/g,"").replace(/\D/g,'')); 
    } catch (err) { 
    return 0; 
    } 
}

来源

2017-08-01 Andrew

请显示相应的HTML和其他功能。 –

为什么你使用jQuery，香草querySelector和es6？ – Roman

什么时候你没有显示我们的功能，更新第一个元素？他们应该几乎在同一时间做到这一点。是否通过选择更改事件触发？如果是这样，你可以在你神秘的功能之后调用上面的函数。 –

如果你不想碰其他的功能都和假设它也被称为上的选择更改事件。一个真正哈克的方式可能是，这样的事情 -

$('select').on('change', function() { 
setTimeout (function() 
{ 
    const headPrice = document.querySelector('.header--itemprice'); 
    const lowerPrice = document.querySelector('span.item--itemprice'); 
    const $lowerText = $(lowerPrice).text(); 
    $(headPrice).text($lowerText); 
}, 0); 
});

来源

2017-08-01 20:42:07 Akhil

对不起，应该提到。我确实尝试过 - 没有运气。 – Andrew

另一个函数也被称为select的改变吗？ – Akhil

我老实说在解析其他函数时遇到了麻烦。我已经将它们添加到原来的 – Andrew

在这种情况下，更好的办法是改变功能，在执行功能时，你甚至可以触发事件，看这个事件来触发其它功能更改元素（'.header - itemprice'）

来源

2017-08-02 14:01:21

听起来不错。你可以进一步了解一下它的外观吗？ – Andrew

您可以使用[触发jQuery的]（http://api.jquery.com/trigger/） –

您观看事件更新值 $（“.item - itemprice”）.on（“updatePrice” ，功能（event，param1，param2）{ alert（“Price was updated”）; }）; 您触发的函数内部 $（“.item - itemprice”）.trigger（“updatePrice”，[“Custom”，“Event”]）; –

更新一个元素后更新

回答

相关问题