使用 MutationObserver 比较新旧文本内容

Question

我需要比较更改发生前后元素的子元素中的文本。我可以使用下面的脚本和 return 新值来触发函数，但我还需要能够访问旧值。

$('#changeButton').click(
  function() {
    var currentValue = parseInt($('#changingElement').text())
    $('#changingElement').text(currentValue+1);
  }
)


$(function() {
    var parentOfChangingElement = document.getElementById("changingElementParent");
    var alertOldAndNewValue = function() {
      alert("I'm unsure how I get the 'old' value");
      alert('New value: ' + $('#changingElementParent').text());
    }
    var observer = new MutationObserver(function(e) {
      alertOldAndNewValue();
    });
    observer.observe(parentOfChangingElement, {
      subtree: true,
      childList: true
    });
});

.button {
  border: 1px solid black;
  font-weight: normal;
  margin-bottom: 10px;
  padding: 10px;
  width: fit-content;
}
.button:hover {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<div id="changeButton" class="button">
  Click me to change value
</div>

<div id="changingElementParent">
  <div>
    <div id="changingElement">
      100
    </div>
  </div>
</div>

如果有人有任何想法，我将不胜感激。

提前致谢！

Answer 1

您是否需要使用 Mutation Observer？还是可以使用全局变量？

有很多方法可以做到...Bellow 是最快的解决方案。我可以根据您的反馈对其进行更新，因此请随时在评论部分向我提问。

跟踪先前值的最简单方法是在处理函数结束时始终保存它。

在下面的示例中，在 changeButton 函数的末尾，我刚刚将 previousValue 更新为与 newValue 相等。

当页面初始加载时，previousValue 等于 currentValue。

// global variable
const changeBtn   = document.getElementById('changeButton');
const target      = document.getElementById('changingElement');


// Save previous_value in a data attribute, if global variables are not an option
target.dataset.previousValue = parseInt(target.innerText);

changeBtn.addEventListener('click', function(e){

    let previousValue = target.dataset.previousValue
        currentValue  = parseInt(target.innerText),
        newValue      = currentValue + 1;
    
    target.innerText = newValue;
    
    console.log('ClasicWay: previous value is ' + previousValue);
    console.log('ClasicWay: new value is ' + newValue);
    
    // all processing ended at this point, 
    // so we can update or previousValue to currentValue
    target.dataset.previousValue = currentValue;
})




//  Observer way
const observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        console.log("MutationObserverWay: previous value is ", mutation["removedNodes"][0]["nodeValue"]);
        console.log("MutationObserverWay: new value is ", mutation["addedNodes"][0]["nodeValue"]);
    });
});

    
observer.observe(
  target, 
  {
    childList: true,
  }
);

.button {
  border: 1px solid black;
  font-weight: normal;
  margin-bottom: 10px;
  padding: 10px;
  width: fit-content;
}
.button:hover {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<div id="changeButton" class="button">
  Click me to change value
</div>

<div id="changingElementParent">
  <div>
    <div id="changingElement">100</div>
  </div>
</div>

使用 MutationObserver 比较新旧文本内容

Use MutationObserver compare old and new text content

jquery

mutation-observers