使用JavaScript检测和显示HTML内容

情景：

我有一个网站列出了一些产品的价格——每个产品都有“完整价格”和“销售价格”属性。如果商品没有出售，“销售价格”只是留空

使用JavaScript，我希望显示每个项目的最低价格（例如，如果有销售价格显示，否则显示完整价格）

我将如何编写一个脚本来实现这一点

我举了个例子来说明我的意思。最低价格应显示在“pricestory”分区中

59.99
70

纯CSS解决方案：

---

这就是您想要的吗？

假设元素始终按顺序排列：

销售价格

标价

价格故事

，您可以遍历所有

salePrice

项目，并根据需要使用设置

priceStory

内容：

[].forEach.call(document.querySelectorAll('.salePrice'), function(sp) {
  var salePrice = sp.textContent || Infinity,  //default to Infinity if missing, 
                                               //so Math.min will use listPrice
      listPrice = sp.nextElementSibling.textContent || Infinity;

  sp.nextElementSibling.nextElementSibling.textContent = Math.min(salePrice, listPrice);
});

[].forEach.call（document.querySelectorAll（'.salePrice'），函数（sp）{
var salePrice=sp.textContent | | Infinity，//默认为无穷大，因此Math.min将使用listPrice
listPrice=sp.nextElementSibling.textContent | |无穷大；
sp.nextElementSibling.nextElementSibling.textContent=Math.min（salePrice，listPrice）；
});
.salePrice{
字体系列：arial；
字体大小：12px；
颜色：#777777；
}
.价目表{
字体系列：arial；
字体大小：12px；
颜色：#000000；
}
.价格故事{
字体系列：arial；
字体大小：12px；
颜色：#777777；
边缘底部：20px；
}

59.99
70
70
79.99
70
35.99
这个解决方案怎么样


var salePriceElements=document.getElementsByClassName（'salePrice'）；
var listpricelements=document.getElementsByClassName（'listPrice'）；
var pricestoryements=document.getElementsByClassName（'priceStory'）
对于（var i=0；isalePrice？salePrice:listPrice；
}
priceStoryElements[i].innerHTML=priceStory；
}
.salePrice{
字体系列：arial；
字体大小：12px；
颜色：#777777；
}		
.价目表{
字体系列：arial；
字体大小：12px；
颜色：#000000；
}
.价格故事{
字体系列：arial；
字体大小：12px；
颜色：#777777；
边缘底部：20px；
}
#解释{
字体系列：arial；
字体大小：12px；
颜色：#777777；
}

59.99
70
70
79.99
70
35.99
我认为这将涉及使用.innerHTML和条件逻辑（如果SalePrice！=''，然后插入ListPrice），但我有点被困在如何使用循环实现每个项目上。显然，我对JS是个新手：）你不需要ID。将每个产品包装在一个单独的容器中，
…
，以使您的生活更轻松。在上一个示例中，没有标价，但有销售价格。。。这是一个实际的可能性，还是一个输入错误？虽然我很感激它会起作用，但在这种情况下，我不能处理HTML/DIV。这是我正在处理的一个更大问题的简化版本-需要一个纯JS解决方案而不触及divs@Santi这是一个实际的可能性，我正在寻找一个JavaScript解决方案一个只有CSS的解决方案通常比JavaScript解决方案更可取+1他希望在第三个div中填充两个div中价格较低的一个，然后。。。这在CSS中是不可能做到的。哦，对不起，我认为CSS版本会更好。然后，正如Andreas在评论中所说的，最好将每个产品包装在自己的div中，以确保我们将这两个价值结合在一起。您使用的是jQuery还是纯JS？编辑：我一定错过了他关于填充最后一个div的问题的最后一部分，对不起。不用担心，这是一个公认的奇怪场景。使用纯JS，无需jQueryThis非常好-非常感谢您提供有关nextElementSibling的文档链接。非常有用，很好知道！很好的解决方案，但是您为每个产品添加了一个新的div。肯定会让事情变得更容易，但这并不是我想要的。谢谢你！如果元素的顺序不总是相同的，这是一个很好的解决方案。但是你应该把
salePrice
和
listPrice
转换成数字，因为
2
小于
10
，但是
'2'
大于
'10'
@Rick Hitchcock是的，你说得对，我错过了。谢谢你的评论。
.listPrice {
   display: none;
}     
.salePrice:empty + .listPrice {
  display: block;
}

[].forEach.call(document.querySelectorAll('.salePrice'), function(sp) {
  var salePrice = sp.textContent || Infinity,  //default to Infinity if missing, 
                                               //so Math.min will use listPrice
      listPrice = sp.nextElementSibling.textContent || Infinity;

  sp.nextElementSibling.nextElementSibling.textContent = Math.min(salePrice, listPrice);
});