使用事件处理函数重新加载 <ul>

Question

我对 JavaScript/HTML/CSS 非常陌生。作为第一个网站项目，我正在使用 Shopify 开发我的在线商店。

This is My Website

在更改其中一个选项（大小或颜色）后，我正在尝试更新图像列表（主图片下方的缩略图）。

通过使用每个图形的 alt_text 首次加载页面时，我已设法显示正确的图像。例如，如果您更改选项并重新加载网站，您将看到相应的数字。我是这样做的：

{% assign wanted_alts = product.selected_or_first_available_variant.options %}
<ul>
{% for media in product.media %}
    {% if wanted_alts contains media.alt or media.alt == "All" %}
        <li>
        ...
        </li>
    {% endif %}
{% endfor %}
</ul>

基本上，我只加载 alt_text 等于所选选项的图像。

我现在想在选择一个选项时更改所有缩略图，例如您选择不同的颜色。目前它只有在你这样做时才有效

1. 首先选择选项。
2. 然后刷新页面。

我希望列表自动更新。我发现选择另一个选项的事件是由这个函数处理的：

_onSelectChange: function() {
      var variant = this._getVariantFromOptions();

      this.container.dispatchEvent(
        new CustomEvent('variantChange', {
          detail: {
            variant: variant
          },
          bubbles: true,
          cancelable: true
        })
      );

      if (!variant) {
        return;
      }

      this._updateMasterSelect(variant);
      this._updateImages(variant);
      this._updatePrice(variant);
      this._updateSKU(variant);
      this.currentVariant = variant;

      if (this.enableHistoryState) {
        this._updateHistoryState(variant);
      }
    }

我想实现类似（原谅我的无知）：

_onSelectChange: function() {
        ...
     /* Reload the <ul> tag that sets which figures to display */
    }

有人能指出我正确的方向吗？

编辑： 我已经能够通过以下方式获得所需的行为（以非最佳方式）：

_onSelectChange: function() {
        ...
        location.reload();
    }

重新加载整个页面。

我试图只重新加载<ul>，但我不知道该怎么做。我尝试了以下方法，但没有成功：

<div id="myID">
{% assign wanted_alts = product.selected_or_first_available_variant.options %}
<ul>
{% for media in product.media %}
    {% if wanted_alts contains media.alt or media.alt == "All" %}
        <li>
        ...
        </li>
    {% endif %}
{% endfor %}
</ul>
</div>

还有：

_onSelectChange: function() {
        ...
        $('#myID').load(document.URL +  ' #myID');
    }

感谢任何帮助。

Answer 1

基本上，我给出的是想法，而不是代码示例，因为很难将工作代码与调试一起放到网站上。

您遵循这些步骤来实现它。

1. 像普通滑块一样加载所有图像，现在一旦页面加载，您就可以检查变化并显示具有相似 alt 标签的图像，并使用内联 CSS 或自定义类隐藏另一个。

2. 一旦变体发生变化，您可以检查图像的 ul li，然后根据所选变体数据再次隐藏/显示。

我想你明白了。

Answer 2

嗯，我可以想出一些方法来完成这项工作。其中之一是关于您编写​​一个函数来创建具有正确图像的元素！

我会更好地描述它：

const showProductImages = (wanted_alts, media) => {
  var ul = document.createElement('ul'); // Creat a new ul elemente

  // Do your filter and conditional here and create the li elements (with complete attributes)
  media.forEach(element => {
    if (Something like "if wanted_alts contains media.alt or media.alt == 'All'") {
      var li = document.createElement('li');
      li.innerHTML="<a onClick=''>...</a>"+" "+"etc..";
      ul.appendChild(li);
    }
  })

  // You should have a written html div with the id used below
  document.getElementById('thumbs').innerHTML = "";  // Clean up the div content
  document.getElementById('thumbs').appendChild(ul); // Set new thumbs list
}

创建此函数后，您可以在 _onSelectChange 中调用它。

别忘了用 showProductsImages 中使用的 id 创建一个 div。