如何从 price 中检测和捕获更改（更新）的价格？

Question

我正在尝试获取下面的代码来捕获  内容。当从下拉列表中选择可配置产品的变体时，由于产品价格发生变化，部署在产品详细信息页面上的自定义 JS 文件中的函数中的下面的 JQuery 代码无法获得控制权。能否请您指出这里有什么不对的地方？

define([
    'jquery',
    'domReady!'
], function($) {
    var docloch=document.location.href,new_title="";

    // Commented out as the Tab is not opening by default.
    // $("#tab-label-product.info.description").click();
    setTimeout(function() {
        $("#pmm_shipping").html('<br><div style="margin:-40px 0 15px">'+get_pmm_shipping_text()+'</div>');
    }, 750); // end of setTimeout

    // make the word CLOSEOUT red on product pages
    if ($("h1").text().indexOf("CLOSEOUT!")>-1 || $("h1").text().indexOf("OPEN BOX!")>-1){
        var newT= $("h1").html();
        newT = newT.replace("CLOSEOUT!",'<span style="color:#FF0000">CLOSEOUT!</span>');
        newT = newT.replace("OPEN BOX!",'<span style="color:#FF0000">OPEN BOX!</span>');
        $("h1").html(newT);
    }

    // THIS IS WHERE I AM TRYING TO CAPTURE THE CHANGED SPAN CONTENT
    $(".price-box").on("change", ".normal-price .price-wrapper span.price", function() {
      alert('Price Changed');
      console.log('New Price Captured ');
      // Get the value of the span element
      var price = $(".price-box .normal-price .price-wrapper span.price").html();**

      // Clean and Convert the value to cents
      var priceCents = parseInt(parseFloat(price.replace(/[^\d.]/g,'')) * 100);

      // If value is different from existing Klarna product placement value, update it.
      // and then call Klarna with refresh-event to refresh the placement.
      var oldPurchaseAmt = $(".product-add-form klarna-placement").attr("data-purchase-amount");
      if (priceCents !== oldPurchaseAmt) {
        $(".product-add-form klarna-placement").attr("data-purchase-amount", priceCents);

        // Trigger event to refresh
        window.KlarnaOnsiteService = window.KlarnaOnsiteService || [];
        window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' });
      }
    });
}); // end of $ function

Answer 1

尝试用文字代替 html

var price = $(".price-box .normal-price .price-wrapper span.price").text();

Answer 2

如果你想检测 DOM 中的变化，你需要一个 MutationObserver。这是一个昂贵的操作，通常表示代码可以重构，但它会适合您的目的，因为您已经对问题进行了措辞。

我已将您的问题简化为最基本的问题。我们有一个包含价格的  ，我们创建了一个 MutationObserver 来监视变化，按摩数据（删除“$”字符并将值加倍，但这只是为了说明您可以按摩数据） .然后将修改后的值写入第二个 .

我正在使用本机 javascript 来查询 DOM，但您可以使用 JQuery。

const targetNode = document.querySelector('#watchme');
const answerNode = document.querySelector('#answer');

// change price periodically
const changePrice = () => {
    const newPrice = Math.floor( Math.random() * 16384 ) / 100;
    targetNode.innerText = '$' + newPrice;
};
window.setInterval(changePrice, 2048);

// set up Mutation Observer
const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {      
        const priceAsString = mutation.target.innerText;
        const doublePrice = Number( priceAsString.replace(/^$/g,'') ) * 2;
        answerNode.innerText = doublePrice;
    });
});

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

<p>Original Price is: <span id="watchme"></span></p>
<p>Double Price is: <span id="answer"></span></p>

如何从 <span>price</span> 中检测和捕获更改（更新）的价格？

How to detect and capture the changed(updated) price from within <span>price</span>?

javascript

jquery

frontend

web-frontend

dom-events