Question

我有这个HTML：

<p class="price product-page-price ">
  <span class="woocommerce-Price-amount amount">
    <span class="woocommerce-Price-currencySymbol">£</span>
    24.99
  </span>
</p>

我使用以下javascript成功提取24.99的价格：

function() {
  var element = document.querySelector('.product-page-price .woocommerce-
Price-amount');
  var price = element.innerHTML.match(/\d*\.\d*/)[0];
  return price;
}

但是，我的部分产品有售价，html如下：

<p class="price product-page-price price-on-sale">
  <del>
    <span class="woocommerce-Price-amount amount">
      <span class="woocommerce-Price-currencySymbol">£</span>
      24.99
    </span>
  </del>
  <ins>
    <span class="woocommerce-Price-amount amount">
      <span class="woocommerce-Price-currencySymbol">£</span>
      12.99
    </span> 
  </ins>
</p>

在上面的例子中，什么javascript会提取12.99的价格而不是24.99？

Answer 1

根据您的代码，试试这个：

function() {
   var element = document.querySelector('.product-page-price.price-on-sale > ins > .woocommerce-Price-amount');
   if(!element) {
      element = document.querySelector('.product-page-price .woocommerce-Price-amount');
}
   var price = element.innerHTML.match(/\d*\.\d*/)[0];
   return price;
}

它首先检查是否有售价。如果没有，它会按照您的方式选择价格。

Answer 2

受@sjahan启发 - 我修改了代码以传递所有项目（您可能在页面上有许多项目因此document.querySelectorAll - 其中一些具有折扣价格。并且每个项目 - 检查它是否是有打折的类，然后如果是这样 - 使用ins作为选择器 - 你可以获得该节点的文本内容 - 请注意我在每种情况下都替换了英镑符号。我还添加了一些值，所以你可以以更实用的方式使用这些值。

＆＃13;

var elementList = document.querySelectorAll('.product-page-price');

var totalUndiscountedValue = 0;
var totalDiscountedValue = 0;
  
  for(i = 0; i < elementList.length; i++){
    var classes = elementList[i].className;
    if(classes.indexOf('price-on-sale') !=-1)      
      {
        getDiscountedPrice(elementList[i])
      } else {
        getPrice(elementList[i])
      }; 
     
  }

getTotalValues();
 
 function getDiscountedPrice(element){ 
  var itemPrice  = parseFloat(element.getElementsByTagName('ins')[0].innerText.replace(/£/,''));
  totalDiscountedValue += itemPrice;
  console.log(itemPrice);
  }


 function getPrice(element){ 
  var itemPrice  = parseFloat(element.innerText.replace(/£/,''));
  console.log(itemPrice);
  totalUndiscountedValue += itemPrice;
  }
  
  

  function getTotalValues(){ 
   console.log("Total Undiscounted sales: £"+  totalUndiscountedValue);
       console.log("Total Discounted sales: £"+ totalDiscountedValue);
          console.log("Total sales: £"+ parseFloat(totalDiscountedValue + totalUndiscountedValue).toFixed(2));
 }

＆＃13;

<p class="price product-page-price "><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>24.99</span></p>
    
    
    
    <p class="price product-page-price price-on-sale"><del><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>24.99</span></del><ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>12.99</span></ins></p>
    
              
        
    <p class="price product-page-price price-on-sale"><del><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>24.99</span></del><ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>12.99</span></ins></p>
    
    <p class="price product-page-price "><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>24.99</span></p>

＆＃13;

Javascript if else提取常规价格或促销价格

2 个答案: