Question

我正在尝试为我的Shopify商店更改Javascript中的一些代码，我想要做的是当选择产品的颜色选项时，特色图像会更改为变体的第二个或第三个图像（每个变体有5个图像），现在，正如您从代码中看到的，它只会更改为精选图像，如果您可以帮助我，我将不胜感激，感谢提前！

 /**
     * Trigger event when variant image changes
     *
     * @param  {object} variant - Currently selected variant
     * @return {event}  variantImageChange
     */
    _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
      });
    },

    /**

Answer 1

如果您确切地知道基于数组定位需要哪个图像，那么代码将非常简单：

var all_images = document.querySelectorAll(some_css_selector_string);
var image_i_want = all_images[some_index];

困难的部分是知道你想要哪个数组索引 - 以及每个变体上的特色图像（如果你在每个变体上单独设置特色图像）应该给你正确的图像信息。（您可能还想在Shopify管理员中仔细检查您的产品，以确保每个变体都有适当的图像集）如果这仍然无效，您可能需要在该代码中添加console.info(variant)以便您可以检查可用信息，以便根据变量实际表示的内容做出有意义的决策。

例如，如果您的图像命名方案与变体选项的名称一致，则可以使用variant.option1 / variant.option2 / variant.option3中的值来汇总预期图像名称并根据该名称更新图像标记。

（顺便说一句：实际更新你的图片的代码可能是在一个正在监听'variantImageChange'事件的函数 - 你提供的代码并没有直接改变页面上的任何内容）

希望这有帮助！

如何在Javascript中选择第n张图片

1 个答案: