javascript - jQuery.text() 获取 html 价格并使用数字字段增加价格

Question

如何获得数字价格？简单的产品有:

<td class="wh-price">                           
   <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>425.00</span>                       
</td>

批发产品有:

    <td class="wh-price">                           
        <del class="original-computed-price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>625.00</span></del>

        <span style="display: block;" class="wholesale_price_container">
            <span class="wholesale_price_title"></span>
            <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>54,321.00</span></ins>
        </span>
    </td>

需要简单批发产品的价格(<ins>价格；而不是<del>价格)产品，以便当数量增加时我可以计算它们。

数量 HTML:

    <td class="quantity-field">
        <div class="quantity">
            <input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
        </div>
    </td>

我尝试过这个jquery:

    $(document).ready(function(){
      $(".qty").on('change',function() {
        setPriceQ();
      });
    })
    const setPriceQ = function(){
      $.each(
        $('tr[data-role="product"]'),
        function(index,element){
          const $el = $(element);
          const originalPrice = $el.find('.woocommerce-Price-amount.amount').text();
          const totalQuantity = $el.find(".qty").val();            
          $el.find('#result').html( originalPrice * totalQuantity );
        }
      );
    };

但它不起作用，并且大多数时候显示 $NaN 所以我尝试了const originalPrice = parseInt($el.find('.woocommerce-Price-amount.amount').text(), 10);

仍然无法工作。据我猜测.text()正在获取<span class="woocommerce-Price-currencySymbol">$</span>这阻止了解析。

html代码是用php <?php echo $product->get_price_html() ?>生成的;对于简单的产品，我只能使用 <?php echo $product->get_price() ?> 获得没有标记的数值。但对于批发产品价格来说，通过简单的 php 是不可能的。

Answer 1

我相信混合使用 jquery 和 native 函数会更好。
JQuery 自动从结果集合中过滤掉文本节点，但使用

$el.find('.woocommerce-Price-amount.amount').get()[0].childNodes[1].textContent

您可以获得您的值的确切文本节点。
它支持所有货币并且不需要加价更改。