JavaScript - for循環中的循環按鈕

Question

任何人請幫助我。我現在在這個代碼中呆了幾個星期。

我想要做的是有一個圖像滑塊與圖像底部的按鈕，將顯示模式中的圖像的相應信息。

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

這裏是JavaScript

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

編輯

請任何人可以幫我。我永遠堅持在這個代碼。

Image is here Image 2

Answer 1

的問題是，只有第一個按鈕的工作原理上的旋轉木馬，那 是開拓模式與圖像的描述，其餘 所行不行

原因是因爲這條線

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

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

​​只會給出第一個元素，所以沒有辦法將事件連接到其他按鈕。使用document.querySelectorAll('.buttonImg')。

這將給一個集合（類似於arraylist）。循環播放arrayList並將cick事件附加到所有事件

Answer 2

也許這對您有幫助作爲出發點？

我試圖模擬你的一排圖片，因爲在stackoverflow上沒有Spring MVC。請原諒我沒有正確格式化的東西。這只是作爲一個原則草圖。我從你的元素中消除了id，因爲這些在循環內部不再是唯一的。

實際jQuery的部分很簡單：我click事件綁定到類=「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>