for 루프 루프 내에서 JavaScript 루프 - 루프

Question

아무도 도와주세요. Im은 약 몇 주 동안이 코드에 갇혀 있습니다.

내가하려는 것은 모달에 이미지의 해당 정보를 표시하는 이미지 하단에 버튼이있는 이미지 슬라이더입니다.

<div class=swipeManual> 
<c:forEach var = "tempCustomer" items = "${customers}"> 
<img id="imgS" src="${pageContext.request.contextPath}/resources/images/${tempCustomer.image}" style="z-index:-2" > 
<button class="buttonImg myBtn" type="button" style="z-index:-1">Click Me!</button> 
<div id="myModal" class="modal"> 

<!-- Modal content --> 
<div class="modal-content"> 
<span class="close">&times;</span> 
<p>${tempCustomer.description}</p> 
</div> 

</div> 

</c:forEach> 

여기

편집 자바 스크립트

<script> 

var buttons = document.querySelectorAll('.buttonImg'); 

function clickHandler(em) { 
var modal = document.getElementById(em);  
modal.style.display = "Block"; 
} 

for (var i = 0; i < buttons.length; i++) { 
(function() { 

    var but = buttons[i].parentNode.id; 

    buttons[i].addEventListener("click", function() { clickHandler(but)}, false); 

}()); // immediate invocation 
} 


</script> 

입니다 아무도 나를 도와주세요 수 있습니다하시기 바랍니다. Im은이 코드에 영원히 머물러 있습니다. Image 2

Answer 1

문제가 첫 번째 버튼을 이 이미지의 설명과 함께 모달을 개방하는 것입니다, 회전 목마에 작동하고, 나머지 이

작동하지 도다이다

Image is here

이 줄로 인해 이유는

var btn = document.getElementsByClassName("buttonImg myBtn")[0]; 

btn.onclick = function() { 
modal.style.display = "block"; 
} 

document.getElementsByClassName("buttonImg myBtn")[0]은 첫 번째 요소 만 제공하므로 이벤트가 다른 버튼에 연결되지 않습니다.

document.querySelectorAll('.buttonImg')을 사용하십시오.

이렇게하면 컬렉션을 얻을 수 있습니다 (arraylist와 비슷 함). 해당 arrayList를 반복하고 모든 이벤트에 cick 이벤트를 첨부하십시오.

Answer 2

아마도 이것은 시작점으로 도움이 될만한 것입니까?

stackoverflow에 스프링 MVC가 없으므로 그림 줄을 에뮬레이트하려고했습니다. 제대로 포맷하지 않으신 것을 용서해주십시오. 이것은 원칙적 스케치로만 의미가 있습니다. 루프 내에서 더 이상 고유하지 않으므로 요소에서 id을 제거했습니다.

는 실제 JQuery와 부분은 매우 간단합니다 : I 클래스 = "myBtn"의 모든 버튼에 클릭 이벤트를 바인딩하고 이벤트 함수 내에서 내가 작업 처리 :

1. 가 보이지 않는 모든 조동사
2. 메이크업을을 현재 모달 다시 표시 (.show())

$(function(){ 
 
$('.myBtn').click(function(){ 
 
    $('.modal').hide();  // first: hide *all* modals 
 
    // $(this).next().show() // then: show the one next to the button 
 
    // or in a general case, when div.modal can not 
 
    // be guaranteed to be "next" to the button: 
 
    $('.modal',this.parentNode).show() 
 
}) 
 
})

.sideways {vertical-align:top;display:inline-block;} 
 
.modal {display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="swipeManual"> 
 
<div class="sideways"> 
 
<img src="http://www.publicdomainpictures.net/pictures/240000/t2/halloween-2017-wallpaper.jpg" style="z-index:-2" ><br> 
 
<button class="buttonImg myBtn" type="button" style="z-index:-1">Click Me!</button> 
 
<div class="modal"> 
 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <span class="close">&times;</span> 
 
    <p>description 1</p> 
 
    </div> 
 
</div> 
 
</div> 
 
<div class="sideways"> 
 
<img src="http://www.publicdomainpictures.net/pictures/210000/t2/boat-in-caribbean-14884763094mZ.jpg" style="z-index:-2" ><br> 
 
<button class="buttonImg myBtn" type="button" style="z-index:-1">Click Me!</button> 
 
<div class="modal"> 
 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <span class="close">&times;</span> 
 
    <p>description 2</p> 
 
    </div> 
 
</div> 
 
</div> 
 
<div class="sideways"> 
 
<img src="http://www.publicdomainpictures.net/pictures/220000/t2/winter-scene-1494682117gMU.jpg" style="z-index:-2" ><br> 
 
<button class="buttonImg myBtn" type="button" style="z-index:-1">Click Me!</button> 
 
<div class="modal"> 
 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <span class="close">&times;</span> 
 
    <p>description 3</p> 
 
    </div> 
 
</div> 
 
</div> 
 
</div>