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。请原谅我没有正确格式化。这仅仅是一个原理草图。我从你的元素中删除了id，因为它们在循环中不再是唯一的。

实际的jquery部分非常简单：我将click事件绑定到class =“myBtn”的所有按钮，并在事件函数内处理动作：

使所有模态不可见
再次显示当前模式（.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>

JavaScript - forEach循环中的循环按钮

2 个答案: