使用 javascript 检测 span 内容的变化

Question

我一直在尝试检测跨度内容是否已更改以及是否已更改以获得值，我在下面制作了一个代码片段，它将更改跨度内容以进行测试但由于某种原因我无法检测到内容已更改。 我认为这可能是“已更改”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>

Answer 1

许多问题

1. 跨度没有值
2. 您有一个 class，而不是 ID，因此选择器在.price语句中为 .price 或在 DOM 中为 document.querySelector(".price") 或 document.querySelectorAll(".price")
3. 只有像<input> 、 <textarea>和<select>元素这样的表单元素有一个 change 事件
4. 什么改变了跨度？ 为什么不能在更改跨度的地方添加代码？
5. 如果没有，那么你需要一个变异观察者：

 $(function() { // change contents of a span - testing purposes const delay = (() => { let timer = 0; return (callback, ms) => { clearTimeout(timer); timer = setTimeout(callback, ms); }; })(); delay(() => { $('.price').html('$100.00'); }, 2000); // detect a change to contents a span const elementToObserve = $('.price')[0]; // get the DOM element const process = () => { // callback const text = elementToObserve.textContent; // gets $100.00 const amount = +text.trim().slice(1); // converts to 100 console.log("changed to", amount) } // create a new instance of 'MutationObserver' named 'observer', // passing it a callback function const observer = new MutationObserver(process); // call 'observe' on that MutationObserver instance, // passing it the element to observe, and the options object observer.observe(elementToObserve, { childList: true }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <span class="price">$90.00</span>

旧版本“DOMSubtreeModified”——注意它会触发两次！

 $(function() { // change contents of a span - testing purposes const delay = (() => { let timer = 0; return (callback, ms) => { clearTimeout(timer); timer = setTimeout(callback, ms); }; })(); delay(() => { $('.price').html('$100.00'); }, 2000); // detect a change to contents a span - deprecated but short $(".price").on("DOMSubtreeModified", function(e) { const amount = +$(this).text().trim().slice(1); // converts to 100 console.log(new Date(),amount) }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <span class="price">$90.00</span>

Answer 2

使用MutationObserver

 $(document).ready(function() { 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); // Select the target node. var target = document.querySelector('#price') // Create an observer instance. var observer = new MutationObserver(function(mutations) { console.log(target.innerText); }); // Pass in the target node, as well as the observer options. observer.observe(target, { attributes: true, childList: true, characterData: true }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <span id="price">$90.00</span>

Answer 3

如果你真的需要在跨度内容更改时运行一些代码，你可以尝试 Mutation observer https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#example