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

Question

我在做一个有吉他列表的练习网页。我想要做的是，当单击吉他挡泥板的缩略图时，一个for循环将遍历类名为"gallery“的所有图像，获取这些信息并将其放在DOM的各个不同部分。要知道的重要事项：

--这些吉他的缩略图都有类名"gallery“，我有五把吉他，依次是:挡泥板平流层吉他，挡泥板电信吉他，吉普森·莱斯·保罗，吉普森·SG，格雷奇电子吉他。

--每个都有一个标题，对应于吉他的名称和与吉他相关的各种图像的文件名(例如，标题"gibson-les-paul“，图像文件是"gibson-les-paul.jpg”和“gibson-les-for 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);


        }

    }

提前感谢！

:-)

Answer 1

尝试在if/else语句中使用break，这样它就不会遍历所有图片