Javascript jquery（在 Shopify 中）循环不工作

Question

我试图只显示 ALT 与颜色样本（产品变体）相同的产品的产品缩略图，您可以在其中单击。通常，您会在 Shopify 中看到所有产品变体的所有图像。我做了一个很长的代码，但我想让它更好地维护，所以我做了一个循环。好吧，这个循环不起作用，但我不明白为什么它不起作用。有人能看出问题吗？

这是无效的代码

  // Only display the images from the first color variant
    var getAltName = document.getElementsByClassName('thumbnail')[0].alt;
    var imageAlt = '[alt="' + getAltName + '"]';
    $('.thumbnail').not(imageAlt).css("display", "none");



 var colorSwatchesArray = ["red","navy","pink","black","cobalt","yellow","white"];

 for (var i = 0; i < colorSwatchesArray.length; i++) {

     var imageAltLoop = '[alt="' + colorSwatchesArray[i] + '"]';
     var imageClassLoop = colorSwatchesArray[i];

     $("." + imageClassLoop).click(function(){
         $('.thumbnail').not(imageAltLoop).css("display", "none");
         $(imageAltLoop).css("display", "block");
     });
 }

这是有效的代码

 // When you go to the product page, only show the product images (thumbnails) which has the ALT tag that the first product image has
 var getAltName = document.getElementsByClassName('thumbnail')[0].alt;
 var imageAlt = '[alt="' + getAltName + '"]';
 $('.thumbnail').not(imageAlt).css("display", "none");

// red - Click on the color swatch and show all thumbnails whiteh the same ALT tag, and hide all thumbnails which hasn't the same ALT tag as the color swatch
 $(".red").click(function(){
     $('.thumbnail').not('[alt="red"]').css("display", "none");
     $('[alt="red"]').css("display", "block");
 });

 // Navy
 $(".navy").click(function(){
     $('.thumbnail').not('[alt="navy"]').css("display", "none");
     $('[alt="navy"]').css("display", "block");
 });

 // Pink
 $(".pink").click(function(){
     $('.thumbnail').not('[alt="pink"]').css("display", "none");
     $('[alt="pink"]').css("display", "block");
 });

 // black
 $(".black").click(function(){
     $('.thumbnail').not('[alt="black"]').css("display", "none");
     $('[alt="black"]').css("display", "block");
 });

 // Cobalt
 $(".cobalt").click(function(){
     $('.thumbnail').not('[alt="cobalt"]').css("display", "none");
     $('[alt="cobalt"]').css("display", "block");
 });

 // yellow
 $(".yellow").click(function(){
     $('.thumbnail').not('[alt="yellow"]').css("display", "none");
     $('[alt="yellow"]').css("display", "block");
 });

 // White
 $(".white").click(function(){
     $('.thumbnail').not('[alt="white"]').css("display", "none");
     $('[alt="white"]').css("display", "block");
 });

Answer 1

问题在于您添加的循环，以及您在循环中初始化变量然后在点击事件处理程序中使用它们的事实。虽然这看起来完全合乎逻辑，但当点击事件处理程序被触发时，所有变量都会发生变化。

解决这个问题很简单 - 只需将循环内的代码包装在匿名函数中，这样所有变量都只具有局部作用域，不会在函数外部受到影响...

for (var i = 0; i < colorSwatchesArray.length; i++) {
     (function() {
         var imageAltLoop = '[alt="' + colorSwatchesArray[i] + '"]';
         var imageClassLoop = colorSwatchesArray[i];

         $("." + imageClassLoop).click(function(){
             $('.thumbnail').not(imageAltLoop).css("display", "none");
             $(imageAltLoop).css("display", "block");
         });
     })();
}

Javascript jquery（在 Shopify 中）循环不工作

Javascript jquery (in Shopify) loop is not working

javascript

jquery

loops

shopify