Question

我试图遍历节点列表并更改某些值的样式。

var regularPrices = document.querySelectorAll('div.price__regular');

regularPrices.forEach(function(regularPrice) {
  if (regularPrice.textContent !== 'Sold out') {
    regularPrice.style.textDecoration = 'line-through';
  }
}

这就是我想做的。但是由于某种原因，我无法抓住所有节点。当我使用document.querySelector而不是document.querySelectorAll时，可以检索第一个产品的价格并更改样式。但只不过是第一个产品。

是否不使用document.querySelectorAll检索所有值？因此，我可以遍历它们。

这里缺少什么？

Answer 1

我认为您的问题是由“优先级”样式引起的。如果是真的，则需要通过javascript设置important优先级标志，并且可以使用setProperty方法来实现，如下所示：

regularPrices.forEach(function(regularPrice) {
  if (regularPrice.textContent !== 'Sold out') {
    regularPrice.style.setProperty('text-decoration', 'line-through', 'important');
  }

更新

似乎不可能通过JavaScript编辑Shopify主题，因为他们正在使用Liquid。至少我从他们的文档中了解到了。

您可能会发现一些有关如何实施所需行为here和here的有用信息。

Answer 2

您的代码是正确的，但是我观察到的问题是该页面未在Javascript函数运行之前呈现，因此您需要将脚本放置或将其导入到html页面中的body结束标记（）之后。这样，JavaScript代码将在页面呈现后运行。

Wrote new patch <GF[23->23] (BIOS)> to --host

JavaScript：遍历节点列表

2 个答案: