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

我正在制作一个带有吉他列表的练习网页。我想要做的是当点击吉他Fender Telecaster的缩略图时，for循环会遍历所有类名为“gallery”的图像，并将这些信息放在DOM的各个不同部分。重要的事情要知道：JavaScript：For循环一直持续到结束

- 这些吉他的缩略图都有“画廊”的类名称，我有五个吉他按此顺序：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-loop可以正常工作除了当我点击任何缩略图时，最后一张图片上有一个“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); 


     } 

    }

谢谢！

:-)

来源

2014-01-25 Les Paul

你应该专注于“标题”属性，以及它如何控制逻辑的代码。这不代表您点击的品牌（假设正在点击类“图库”元素）？而不是循环，它看起来'bigChange（）'实际上就像'onGuitarSelected（guitarType）'，里面没有循环。 – veritasetratio

为了清晰起见，我会将名称从bigChange更改为onGuitarSelected（吉他类型），并将其取名。除此之外，我会努力将它从for循环更改为更类似于您所建议的看看它是否有效的东西，但是如果其他人有任何指示，我全是耳朵。谢谢你veritasetratio。 –

在尝试使用break您的if/else语句，以便它在所有的图片不循环

来源

2014-01-25 17:50:52 user2484277

我试过打破;在if/else语句中，以及在四个replaceNodeText语句之后和倒数第二个大括号之后。它只是一起停止循环。它需要别的东西。 –

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

回答

相关问题