javascript - 使用事件处理函数重新加载

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. 像常规 slider 一样加载所有图像，现在一旦加载页面，您就可以检查变体并显示具有相似 alt 标签的图像，并使用内联 CSS 或自定义类隐藏另一个图像。

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

我想你明白了。