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循環一直持續到結束

回答

相關問題