Tengo un código html de una plataforma de recomendación de productos en línea que me permite agregar JS a html.
El código HTML a continuación funciona bien, pero quiero aplicarle JS basado en la lógica de que, si ${discountvalue} muestra algún valor, entonces los valores de ${discountvalue} y ${regularvalue} son visibles con una línea cruzada en regularvalue.
Si ${regularvalue} no tiene ningún valor o está vacío/nulo, entonces solo ${regularvalue} será visible.
CÓDIGO HTML:
<div class="slider-wrapper"> ${#Recommendations} // This loads the the more then one values of product recommendation ${discountvalue} ${regularvalue} <div class="slider-wrapper"> <div class="pricebox"> <p class="dynamic-price">${discountvalue}</p> <p class="regular-price"> <span class="rec_price_num">${regularvalue}</span> </p> </div> </div> ${/#Recommendations} </div>Y este es el código JS:
var itemPrices = document.querySelectorAll('.slider-wrapper .pricebox'); for(var i=0; i<itemPrices.length; i++){ var discount_price = itemPrices[i].getElementsByClassName("dynamic-price")[0].innerHTML; var price = getElementsByClassName("rec_price_num")[0].innerHTML; if(discount_price){ var discount_price = itemPrices[i].getElementsByClassName("dynamic-price")[0].innerHTML; var price = getElementsByClassName("rec_price_num")[0].innerHTML; } else { var price = getElementsByClassName("rec_price_num")[0].innerHTML; } }parseFloat(discount_price.innerHTML) devolverá un valor real si el precio de descuento se puede analizar en un número de punto flotante diferente de 0.
Puedes usar la regla CSS text-decoration: line-through; tener una línea cruzada en el valor.
var itemPrices = document.querySelectorAll('.slider-wrapper .pricebox'); for(var i=0; i<itemPrices.length; i++){ var discount_price = itemPrices[i].getElementsByClassName("dynamic-price")[0]; var price = itemPrices[i].getElementsByClassName("regular-price")[0]; if(parseFloat(discount_price.innerHTML)){ price.style.textDecoration = "line-through"; } else { discount_price.style.display = "none"; } } <div class="slider-wrapper"> <div class="pricebox"> <p class="dynamic-price">0</p> <p class="regular-price">5</p> </div> <hr> <div class="pricebox"> <p class="dynamic-price">4</p> <p class="regular-price">5</p> </div> </div>No necesita javascript. se puede resolver con css3
.pricebox p { font-weight: bold; font-size: 1.5rem; color: red; margin: 0 0 1rem; } .pricebox .dynamic-price { margin-bottom: 0; } .pricebox .dynamic-price:empty { display: none } .pricebox .dynamic-price:not(:empty) + .regular-price { font-size: .875rem; color: gray; text-decoration: line-through; } <div class="slider-wrapper"> <div class="slider-wrapper"> <div class="pricebox"> <p class="dynamic-price"></p> <p class="regular-price"> <span class="rec_price_num">200.00</span> </p> </div> <div class="pricebox"> <p class="dynamic-price">100.00</p> <p class="regular-price"> <span class="rec_price_num">150.00</span> </p> </div> </div> </div>