JavaScript - forEach 循环中的按钮循环

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.getElementsByClassName("buttonImg myBtn")[0] 只会给出第一个元素，因此事件不会附加到其他按钮。

使用document.querySelectorAll('.buttonImg')。

这将给出一个集合（类似于 arraylist）。循环遍历该 arrayList 并将 cick 事件附加到所有事件

Answer 2

也许这是对您有所帮助的起点？

我试图模仿你的图片行，因为 stackoverflow 上没有 Spring MVC。请原谅我没有正确格式化。这仅作为原理草图。我从您的元素中删除了 ids，因为它们在循环中不再是唯一的。

实际的 jquery 部分非常简单：我将点击事件绑定到 class="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>