Question

我正在处理一个页面，其中一个元素（＆＃39; .item - itemprice＆＃39;）通过另一个我不想触摸的功能更新其文本。我想要做的是获取另一个元素（＆＃39; .header - itemprice＆＃39;）进行更新，使其文本与第一个元素匹配。

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

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

Answer 1

如果您根本不想触摸其他功能，并且假设它也在select的更改事件中被调用。一种真正的hacky方式可能是这样的 -

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

Answer 2

在这种情况下，更好的方法是更改函数，甚至可以在执行函数时触发事件并观察此事件以触发其他函数来更改元素（＆＃39; .header - itemprice＆＃ 39;）

在另一个更新后更新一个元素

2 个答案: