forEachループ内のJavaScript - ループインボタン

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> 

です。 Imはこのコードに永遠に詰まっていました。

Image is here Image 2

Answer 1

問題は は、画像の説明とモーダルを開くことで、残り が

を動作しないdoestことを、最初のボタンは、カルーセル上で動作することです

理由はこの行のためです

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の部分は非常に簡単です：私は、クラス=「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>

再び可視現在モーダル