获取 Javascript 中不同选择的价值

Question

我在下面有一个我正在尝试处理的代码示例，除了每种尺寸的价格会输出不同的东西。例如，小号为 20 欧元，中号：30 欧元，大号：40 欧元。

我想做的是每次在页面上选择不同尺寸时获取价格。我正在使用 MutationObserver 来观察所做的价格变化。但是当我 console.log 这个或尝试将它添加到我的原始代码中的新 class newPrice 时，我只得到第一个价格大小，即 20 欧元，我不知道如何解决这个问题。任何有关我如何解决此问题的帮助或指导将不胜感激。

var targetNode = document.querySelector('.productDetails');
var price  = document.querySelector('.productPrice');
var config = { childList: true };

var callback = function(mutationsList, observer) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
              console.log(price.innerHTML);
        }
    }
};

var observer = new MutationObserver(callback);
observer.observe(targetNode, config);

var clickSize = document.querySelectorAll('.sizeContainer li');
clickSize.forEach( function (el) {
      el.addEventListener('click',function() {
            var node = document.querySelector('.newPrice').insertAdjacentHTML("afterbegin", " " + price.innerHTML +" ");
            });
});

<div class="productDetails">
<ul class="sizeContainer">
<li>Small</li>
<li>Medium</li>
<li>Large</li>
</ul>

<p class="productPrice"> Price of the product would be output here</p>
<p class="newPrice"></p>
</div>

Answer 1

我已经设法使用 .textContent 而不是使用 innerHTML 来定位我想要获得的值，以及一些其他调整。在这里留下我的答案，因为它 may/may 对其他人没有用。

 var targetNode = document.querySelector('.productDetails .productPrice');
    var config = {
        characterData: false,
        attributes: false,
        childList: true,
        subtree: false
    };
    var callback = function(mutationsList, observer) {
        for (var mutation of mutationsList) {
            if (mutation.type == 'childList') {
                window.console.log(targetNode.textContent);
            }
        }
    };
    var observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
  
  var clickSize = document.querySelectorAll('.sizeContainer li');
  clickSize.forEach( function (el) {
        el.addEventListener('click',function() {
          var node = document.querySelector('.newPrice');
          node.innerHTML = "" + targetNode.textContent +"";
        });
  });

<div class="productDetails">
<ul class="sizeContainer">
<li>Small</li>
<li>Medium</li>
<li>Large</li>
</ul>

<p class="productPrice"> Price of the product would be output here</p>
<p class="newPrice"></p>
</div>

获取 Javascript 中不同选择的价值

Getting value of different selections in Javascript

javascript

dom

nodes

mutation-observers

contentobserver