如何select第n张图片Javascript

Question

I am trying to change the some code in Javascript for my Shopify store, what I am trying to do is when a color option of a product is selected, the featured images changes to the second or third变体的图像（每个变体有 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 中的值 assemble 预期的图像名称并根据该名称更新图像标签。

（顺便说一句：实际更新图像的代码可能在监听 'variantImageChange' 事件的函数中 - 您提供的代码不会直接更改页面上的任何内容）

希望对您有所帮助！

如何select第n张图片Javascript

How to select the n-th picture in Javascript

javascript

css

shopify