我的 JS 函数搜索 html 类并有条件地隐藏或显示有什么问题？

Question

我正在尝试修改 Dawn 2.0 主题，以便在产品页面上根据输入选择器仅呈现带有特定标签的图像。我有一个产品包含 8 个项目，每个项目都有一个图像。该产品可以订购三种变体：

第一个变体是包含 4 件商品的产品。
第二个变体是包含 6 件商品的产品。
第三个变体是包含 8 件商品的产品。

产品页面中有变体选择器：

这三个变体已在 Shopify 管理产品页面上创建。我尝试使用的解决方案是 this 之一。我选择它是因为它是我在其他地方找到的唯一参考（除了购买我不想做的附加），这对我来说似乎是一种合乎逻辑的方法，尽管如果有人可以的话，我对这种方法没有特别的忠诚度想想一个更好的方法来实现我想要的。

此解决方案涉及使用通过 Shopify 管理产品页面分配给图像的替代文本属性的值。应用的替代文本值为：

set_all 对于前 4 个图像，因为这 4 个项目将包含在所有三个变体中（只有 x4 个项目的那个，有 x6 个项目的那个，有 x8 个项目的那个）。
set_6&8 对于第 5 和第 6 个图像，因为这 2 个项目将包含在第 2 个变体（具有 x6 个项目的那个）和第 3 个变体（具有 x8 个项目的那个）中。
set_8 对于第 7 和第 8 个图像，因为这 2 个项目只会包含在第 3 个变体（具有 x8 个项目的变体）

然后将该替代文本值插入到 html 中的数据标记中：

data-thumbnail-set-number="{{media.alt}}"

应用于每个图像所在的 <li>，然后编写一个 js 函数，其中：

隐藏所有图像
在局部变量中存储特色图片的替代文本值（'featured image' 是唯一一张可以应用于 Shopify 管理产品页面中每个变体的图片。因此，如果用户选择不同的变体具有不同替代文本的不同特色图像附加到该变体）。
显示 data-thumbnail-set-number 值与变体 featured_image.alt 文本中的值相匹配的图像。 JS 是：

'./assets/global.js' 在 VariantSelects class，行 ~561

onVariantChange() {
   ...
   this.filterThumbnails();
   ...
};

filterThumbnails() {
    if (this.currentVariant.featured_media != null && this.currentVariant.featured_media.alt != null) {
      document.querySelectorAll('[data-thumbnail-set-number]').forEach(function(el) {
        el.style.display = 'none';
      });
    // show thumbnails for selected set
      var selected_set = this.currentVariant.featured_media.alt;
      document.querySelectorAll('[data-thumbnail-set-number="' + selected_set + '"]').forEach(function(el) {
        el.style.display = 'block';
      });
    }
    else {
    //show all thumbnails
      document.querySelectorAll('[data-thumbnail-set-number]').forEach(function(el) {
        el.style.display = 'block';
      });
    }
    // console.log("thumbnail update", this.currentVariant.featured_media.alt)
  }

除两个问题外，这一切都有效：

我需要在 JS 中编写更多条件，不仅要匹配 featured_image.alt 文本，还要包括：

set_all 图像，因为这些项目带有所有 3 个变体，set_8 变体包含 set_6&8 图像。我应该能够很好地处理这个问题，可能会对每个三个条件正在寻找的 data-thumbnail-set-number 进行硬编码。

尽管 JS 函数似乎可以有效地搜索和显示具有与变体的特色图像替代文本值相匹配的 data-thumbnail-set-number 值的图像，但该页面似乎也总是呈现另一幅图像，该图像根本没有将 data-thumbnail-set-number class 应用于 <li>，并且该图像似乎始终是保存到主要产品的图像中的第一张。

尽管花了很多时间，但我似乎无法理解为什么会出现问题 2，以及如何阻止它。谁能帮我解决这个问题？

Answer 1

PEBCAK

为了解决问题 2，我发现在 <li> 上方的 main-product.liquid 中插入了另一个 <li>，它会迭代并显示图像集合中的所有图像，只是为了显示特色图片。我真的不明白为什么这张特色图片与集合中的其他图片分开渲染，但它就是这样。我只需要将 data-thumbnail-set-number="{{media.alt}}" 添加到这张新发现的精选图片中 <li>。

因为我花了一些时间来写这个问题，所以我想我会把它留在这里以防它对其他人有帮助。

我的 JS 函数搜索 html 类并有条件地隐藏或显示有什么问题？

What is the problem with my JS function searching html classes and conditionally hiding or showing?

html

liquid

shopify

我的 JS 函数搜索 html 类 并有条件地隐藏或显示有什么问题？

What is the problem with my JS function searching html classes and conditionally hiding or showing?

html

liquid

shopify

我的 JS 函数搜索 html 类并有条件地隐藏或显示有什么问题？