JavaScript:For循环一直持续到结束

我正在制作一个练习网页，上面有吉他的列表。我想做的是，当单击吉他挡泥板Telecaster的缩略图时，一个for循环会在所有图像中运行，类名为“gallery”，获取该信息并将其放置在DOM的各个不同部分。需要了解的重要事项：

--这些吉他的缩略图都有“gallery”的类名，我有五把按顺序排列的吉他：Fender Stratocaster、Fender Telecaster、Gibson Les Paul、Gibson SG、Gretsch Electromatic

--每个都有一个标题，对应于吉他的名称和与吉他相关的各种图像的文件名（例如，标题“gibson les paul”，图像文件是“gibson les paul.jpg”和“gibson les paul big.jpg”）

--每个图像缩略图都有四个数据属性，JavaScript在DOM中获取并放置这些属性

问题是：for循环工作正常，除非我单击任何缩略图，最后一个图像具有“gallery”（Gretsch Electromatic）类，并且其所有信息都显示在DOM中。因此，如果我单击五个元素中的任何一个，它将从循环中的最后一个元素获取信息

我包含的第一段代码只是为了让其余的都有意义。这是我遇到问题的第二位代码：

function replaceNodeText(id, newText) {
    var node = document.getElementById(id);
    while (node.firstChild)
      node.removeChild(node.firstChild);
    node.appendChild(document.createTextNode(newText));
  } 

var gallery = "gallery";
var images = "images/";
var big = "-big.jpg";

//以上都是好的，下面是问题所在：

function bigChange() { 
    var runThrough = document.getElementsByClassName(gallery);
    for (var i = 0; i < runThrough.length; i++) {
        var dataKey1 = runThrough[i].getAttribute("data-key1");     
        var dataKey2 = runThrough[i].getAttribute("data-key2"); 
        var dataKey3 = runThrough[i].getAttribute("data-key3");     
        var dataKey4 = runThrough[i].getAttribute("data-key4");
        var title = runThrough[i].getAttribute("title");


        document.getElementById("popUpPic").src = images + title + big;

        if (title != "fender-telecaster") {
            document.getElementById("photo_large").src = images + title + ".jpg";
            }
        else {
            document.getElementById("photo_large").src = images + title + ".png";
            }
        replaceNodeText("guitarTitle", dataKey1);
        replaceNodeText("guitarBrand", dataKey2);
        replaceNodeText("caption1", dataKey3); 
        replaceNodeText("guitarPrice", dataKey4);


        }

    }

函数bigChange（）{
var runThrough=document.getElementsByClassName（gallery）；
对于（var i=0；i

提前谢谢

---

：-）

试着在if/else语句中使用

break

，这样它就不会在所有图片中循环

您应该关注“title”属性以及它如何控制代码的逻辑。这不代表你点击的品牌吗（假设点击了类“画廊”元素）？它看起来不是一个循环

bigChange（）

实际上类似于

onGuitarSelected（guitarType）

，内部没有循环。为了清晰起见，我将把名称从bigChange更改为onGuitarSelected（guitarType），明白了吗。除此之外，我将致力于将它从for循环更改为更像您建议的那样，以查看它是否有效，但如果其他人有任何指针，我将洗耳恭听。谢谢你，我试过放断球；在if/else语句中，以及在四个replaceNodeText语句之后以及在倒数第二个花括号之后。它只是停止了所有的循环。它需要别的东西。