更新一个元素后更新
我正在一个页面中,其中一个元素('.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;
}
}
如果你不想碰其他的功能都和假设它也被称为上的选择更改事件。一个真正哈克的方式可能是,这样的事情 -
$('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);
});
在这种情况下,更好的办法是改变功能,在执行功能时,你甚至可以触发事件,看这个事件来触发其它功能更改元素('.header - itemprice')
听起来不错。你可以进一步了解一下它的外观吗? – Andrew
您可以使用[触发jQuery的](http://api.jquery.com/trigger/) –
您观看事件更新值 $(“.item - itemprice”).on(“updatePrice” ,功能(event,param1,param2){ alert(“Price was updated”); }); 您触发的函数内部 $(“.item - itemprice”).trigger(“updatePrice”,[“Custom”,“Event”]); –
请显示相应的HTML和其他功能。 –
为什么你使用jQuery,香草querySelector和es6? – Roman
什么时候你没有显示我们的功能,更新第一个元素?他们应该几乎在同一时间做到这一点。 是否通过选择更改事件触发?如果是这样,你可以在你神秘的功能之后调用上面的函数。 –