Question

我正在制作一个包含吉他列表的练习网页。我想要做的是当点击吉他Fender Telecaster的缩略图时，for循环遍历所有具有类别“gallery”的图像，获取该信息并将其放置在DOM的各个不同部分。重要的事情要知道：

- 这些吉他的缩略图都有“画廊”的类名，我依次有五把吉他：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循环工作正常，当我点击任何缩略图时，最后一个图像带有一个“画廊”（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，以便它不会遍历所有图片

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

1 个答案: