2014-01-25 3 views
0

기타 목록이있는 연습 웹 페이지를 만들고 있습니다. 내가하고 싶은 일은 기타 펜더 텔레 캐스터 (Fender Telecaster)의 썸네일을 클릭하고, for-loop가 클래스 이름이 "gallery"인 모든 이미지를 실행하고, 정보를 가져 와서 DOM의 다양한 부분에 배치하는 것입니다. 중요한 기타 정보 :JavaScript : for 루프가 끝날 때까지 계속됩니다.

-이 기타의 썸네일은 모두 "gallery"라는 클래스 이름을 가지고 있으며, 펜더 스트라토 캐스터, 펜더 텔레 캐스터, 깁슨 레스 폴, 깁슨 SG, 그레 츠치 일렉트로 룩 (Gretsch Electromatic) 등 다섯 가지 기타가 있습니다.

- 각각은 기타와 관련된 다양한 이미지의 파일 이름 (예 : "gibson-les-paul"및 이미지 파일은 "gibson -les-paul.jpg "및"gibson-les-paul-big.jpg ")

- 각 이미지 미리보기 이미지에는 JavaScript가 가져 와서 DOM에 배치하는 네 가지 데이터 속성이 있습니다.

문제 : "gallery"(Gretsch Electromatic)의 클래스가있는 마지막 이미지의 축소판 이미지 중 하나를 클릭하면 해당 for-loop가 잘 작동하고 모든 정보가 DOM에 나타납니다. 따라서 5 개 중 하나를 클릭하면 루프의 마지막 요소에서 정보를 가져옵니다.

코드의 첫 번째 비트가 포함되어 있으므로 나머지는 의미가 있습니다. 그것은 나에 문제가 코드의 두 번째 비트가 있어요 :

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); 


     } 

    } 

감사합니다! 에

:-)

+0

그것은 논리를 제어하는 ​​방법 귀하의 코드입니다. 클릭 한 브랜드를 나타내는 것은 아닙니까 (클래스 "갤러리"요소가 클릭되었다고 가정 할 때)? 루프 대신에'bigChange()'는 실제로 내부에 루프가없는'onGuitarSelected (guitarType)'와 같을 것입니다. – veritasetratio

+0

내가 명쾌하게하기 위해 bigChange에서 onGuitarSelected (guitarType)로 이름을 바꿀 것이다. 그 외에도 for 루프에서 작동하는지 확인하기 위해 제안한 것과 비슷한 것으로 루프를 변경하려고합니다.하지만 다른 사람이 포인터를 가지고 있다면 나는 모두 귀입니다. 감사합니다 veritasetratio. –

답변

0

break를 사용해보십시오 귀하의 경우/else 문은 모든 사진을 통해 루프를하지 않도록

당신은 "제목"속성에 집중해야
+0

나는 틈을 틀어 보았습니다. if/else 문과 4 개의 replaceNodeText 문 다음에 두 번째 - 마지막 중괄호 뒤에 표시됩니다. 루프를 모두 멈 춥니 다. 그것은 다른 것을 필요로합니다. –

관련 문제