如果销售价格 = 正常价格，如何不显示正常价格

Question

我创建了一个动态模板来使用直接从目录中提取的定价来填充产品。 但是，当特定产品不打折时，即使它们是相同的，仍然有删除线定价和正常价格。 我最初创建了两个变量，如果它们彼此相等，则设置 regularPrice = null。但是这不起作用。 我是 javascript 的新手，我们将不胜感激！

删除线定价：

我的代码：

const regularPrice = document.querySelector("span.pr__price--inactive").textContent;
const salePrice = document.querySelector("span.pr__price--active").textContent;
if (regularPrice === salePrice){
    regularPrice === null;
}

标记：

    {{#if attributes.price.value}}
    <p class="pr__price">
       <span class="pr__price--active">
         <span data-locale="en_US" data-currencycode="USD">$</span> 
         {{attributes.price.value}}
       </span>

       {{#if attributes.listPrice.value}}
       <span class="pr__price--inactive">
         <span data-locale="en_US" data-currencycode="USD">$</span> 
         {{attributes.listPrice.value}}
       </span>
       {{/if}}
    </p>

Answer 1

从您的 UI 中提取值进行比较——尤其是当您可以访问您正在提取的原始数据时——不太理想。 所以我首先要说这可能不是一个好方法。

但是，由于您遗漏了一些要点，我将尝试回答您的问题。

1. 您的代码版本可能会更改regularPrice的值。 如果它可能会改变，请不要将其const ！
2. ===用于严格相等比较，而不是赋值。 您正在尝试将其用于分配。
3. 您确定您的页面不会有多个span.pr__price--inactive和span.pr__price--active实例吗？ 在这里使用 ID 可以使您更加具体。
4. textContent将返回文本。 这就是您要比较的内容。 我们要把它转换成数值吗？

 let regularPriceElement = document.querySelector("span.pr__price--inactive"); //this is a handle to the HTML element let regularPrice = regularPriceElement.textContent; //this is a snapshot of the value in that element let salePrice = document.querySelector("span.pr__price--active").textContent; regularPrice = +regularPrice; //convert to a number salePrice = +salePrice; //convert to a number console.log(regularPrice, salePrice, regularPrice === salePrice); if (regularPrice === salePrice){ regularPriceElement.textContent = "(blank)"; //blank out the element content //or add strike-through regularPriceElement.style.textDecoration = "line-through"; }

 <div> <span class="pr__price--active">1.99</span> </div> <div> <span class="pr__price--inactive">1.99</span> </div>

Answer 2

在检查它们是否相等之前，值得检查哪些将到达代码。 使用 console.log() 或使用调试器记录它们。 同样使用查询选择器，您的 class 的第一个元素将被返回，但您需要事先使用 parseInt 或 parseDouble 对其进行解析以进行比较。