的Javascript的if else提取定期或銷售價格

Question

Ive得到了這個網站：

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

和IM使用下面的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的窩uld提取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作爲選擇器 - 你可以得到該節點的文本內容 - 注意我在每種情況下都替換了磅符號，並且還添加了一些值，所以你能夠以更實用的方式使用的值。

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)); 
 
}

<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>