我一直在嘗試檢測跨度內容是否已更改以及是否已更改以獲取值，我在下面制作了一個代碼片段，該代碼段將更改跨度內容以進行測驗但由于某種原因我無法檢測到內容變了。我認為這可能是“已更改” jquery 的限制，您可能必須宣告它可以期望它做任何事情的更改。
有人對執行此操作的更好方法有任何建議嗎？一旦我在 js 中更改了值，我需要對其進行 js 數學運算以完成解決方案。
$(document).ready(function() {
// change contents of a span - testing purposes
var delay = (function() {
var timer = 0;
return function(callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
delay(function() {
document.getElementById('price').innerHTML = '$100.00';
}, 5000);
// detect a change to contents a span
$(".price").change(function() {
alert(this.value);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<span class="price">$90.00</span>uj5u.com熱心網友回復：
很多問題
- 跨度沒有值
- 你有一個類，而不是一個 ID，所以選擇器
.price在 jQuery 陳述句或 document.querySelector(".price") 或 document.querySelectorAll(".price") 中 - 只有像
<input>,<textarea>和<select>元素這樣的表單元素才有更改事件 - 什么改變了跨度？為什么不能在更改跨度的地方添加代碼？
- 如果沒有，那么您需要一個突變觀察者：
$(document).ready(function() {
// change contents of a span - testing purposes
var delay = (function() {
var timer = 0;
return function(callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
delay(function() {
$('.price').html('$100.00');
}, 5000);
// detect a change to contents a span
const elementToObserve = $('.price')[0]; // get the DOM element
// create a new instance of 'MutationObserver' named 'observer',
// passing it a callback function
observer = new MutationObserver(function(mutationsList, observer) {
const text = mutationsList[0].addedNodes["0"].data; // gets $100.00
const amount = text.trim().slice(1); // converts to 100
console.log(amount)
// console.log(mutationsList);
});
// call 'observe' on that MutationObserver instance,
// passing it the element to observe, and the options object
observer.observe(elementToObserve, {
characterData: false,
childList: true,
attributes: false
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<span class="price">$90.00</span>uj5u.com熱心網友回復：
如果您確實需要在跨度內容更改時運行一些代碼，您可以嘗試 Mutation observer https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#example
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/463807.html
標籤：javascript html jQuery