我正在尝试为我的 Shopify 商店更改 Javascript 中的一些代码，我正在尝试做的是当选择产品的颜色选项时，特色图像更改为变体的第二个或第三个图像(每个variant 有 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
});
},
/**
最佳答案
如果您仅根据数组定位就知道您需要哪张图片，那么代码会非常简单:
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 - 如何在Javascript中选择第n张图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43990772/