javascript - 为什么当点击其他选项值时，不执行change事件中的代码？

Question

你好，小白不懂求问。请问有一个产品，有多个颜色变体选项，每个变体选项有多张图片，但是在产品详情页上，选中一个颜色变体值，它会展示所有颜色变体的图片。如何通过图片的alt值，实现当选中某个颜色变体值，只展示对应的颜色图片，而其他颜色变体值对应的图片隐藏起来？

//我按youtube上的方法，先将style.dispaly="none"，让thumbnail-alt={{ media.alt }}，这样当我选中另一个颜色变体的值时，需要刷新网页，对应的图片才能展示出来。

{% for media in product.media %}{%- assign imgNo = forloop.index0 -%}{% case media.media_type %}{% when 'image' %} <{%- if settings.enable_lightbox -%}a href="{{ media | img_url: 'master' }}"{% else %}div{% endif %} {% if product.selected_or_first_available_variant.featured_image.alt != media.alt and product.selected_or_first_available_variant.featured_image.alt != blank %}    style="display:none"  {% endif %}    thumbnail-alt={{ media.alt }}

//然后再添加当选项改变时的代码，来更新对应的图片、价格等信息，以下代码中的_filterImgVariant是我新构造的函数来实现我想要的效果。但是它不起作用。

  /*** Event handler for when a variant input changes. */    _onSelectChange: function() {      var variant = this._getVariantFromOptions();      this.$container.trigger({        type: 'variantChange',        variant: variant      });      if (!variant){        return;      }      this._updateMasterSelect(variant);      this._updateImages(variant);      this._filterImgVariant(variant);      this._updatePrice(variant);      this._updateSKU(variant);      this.currentVariant = variant;      if (this.enableHistoryState) {        this._updateHistoryState(variant);      }    },    _filterImgVariant: function(variant){      if(this.currentVariant.featured_image && this.currentVariant.featured_image.alt){        document.querySelectorAll('[thumbnail-alt]').forEach(img => img.style.display = "none")        const currentImgAlt = this.currentVariant.featured_image.alt        const thumbnailSelector = '[thumbnail-alt = '${currentImgAlt}']'        document.querySelectorAll('[thumbnail-alt]').forEach(img => img.style.display = "block")       }      else {        document.querySelectorAll('[thumbnail-alt]').forEach(img => img.style.display = "block")      }    },    _updateImages: function(variant){      var variantImage = variant.featured_image || {};      var currentVariantImage = this.currentVariant.featured_image || {};      if (!variant.featured_image || variantImage.src === currentVariantImage.src){ return; }      this.$container.trigger({type: 'variantImageChange', variant: variant });    },    _updatePrice: function(variant){      if (variant.price === this.currentVariant.price && variant.compare_at_price === this.currentVariant.compare_at_price){ return; }      this.$container.trigger({ type: 'variantPriceChange', variant: variant });    },

请问各位前辈，我新添加的_filterImgVariant存在什么问题它为什么不起作用。当我选择其他的颜色变体值时，仍然需要重新刷新网页才能展示对应的图片。我不知道问题在哪儿。

Answer 1

首先，你的代码看起来有些问题。你在_filterImgVariant函数中试图获取当前选中的variant的featured_image的alt属性，然后在querySelectorAll中选择匹配这个alt的元素并显示它。然而，你的querySelectorAll语句中的字符串拼接似乎有些问题，你需要在字符串内使用模板字符串(${...})而不是直接拼接字符串。

另外，你的代码中，当this.currentVariant.featured_image.alt存在时，你隐藏了所有图片，然后显示了当前选中的图片。但是，你并没有在隐藏所有图片后重新显示当前选中的图片。你应该先隐藏所有图片，然后再显示当前选中的图片。

以下是我对你的代码的修改：

_filterImgVariant: function(variant){  if(variant.featured_image && variant.featured_image.alt){    document.querySelectorAll('[thumbnail-alt]').forEach(img => img.style.display = "none")    const currentImgAlt = variant.featured_image.alt    const thumbnailSelector = `[thumbnail-alt = '${currentImgAlt}']` // 使用模板字符串进行字符串拼接    document.querySelectorAll(thumbnailSelector).forEach(img => img.style.display = "block")   }  else {    document.querySelectorAll('[thumbnail-alt]').forEach(img => img.style.display = "block")  }}

此外，你可能还需要注意，你在_updateImages函数中只是触发了'variantImageChange'事件，但并没有实际更新图片。你可能需要在触发事件后手动调用_filterImgVariant函数来更新图片。

希望这些信息能帮到你！如果你还有其他问题，欢迎继续提问。