JSP JavaScript -在forEach循环中循环按钮

92dk7w1h 于 2023-08-01 发布在 Java

关注(0)|答案(2)|浏览(165)

我想做的是有一个图像滑块与按钮的图像，将显示相应的信息，在一个模式的图像的底部。

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

型
问题是只有第一个按钮在旋转木马上工作，也就是打开带有图像描述的模态，其余的都不起作用。我想我的循环按钮不正确，因为只有第一个按钮工作。
图片1
图片2

jsp

来源：https://stackoverflow.com/questions/47364962/javascript-loop-in-button-in-foreach-loop

2条答案

按热度按时间

luaexgnf1#

问题是只有第一个按钮在旋转木马上起作用，也就是打开带有图像描述的模式，其余的都不起作用
究其原因，就是因为这条线

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事件附加到所有事件

赞(0）回复(0）举报 2023-08-01

sf6xfgos2#

也许这是一个对你有帮助的起点？
我试着模仿你的图片行，因为stackoverflow上没有Spring MVC。请原谅我没有正确地格式化东西。这只是一个原则性的草图。我从元素中删除了id s，因为它们在循环中不再是唯一的。
实际的jquery部分非常简单：我将click事件绑定到class=“myBtn”的所有按钮，并在事件函数中处理该操作：
1.使所有模态不可见
1.使当前模式再次可见（.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>

赞(0）回复(0）举报 2023-08-01

我来回答

JSP JavaScript -在forEach循环中循环按钮

2条答案

相关问题

热门标签

最新问答