在 JSP/JS forEach 循环中只有第一个按钮打开

Question

因此，我有一个 JSP 页面附加到我需要使用 JSTL 循环遍历的对象列表。（这是一个 Tiles 项目，控制器正在设置一些模拟对象，这些对象被添加到列表中并作为列表返回。那一点工作正常。）基本上，我希望它连续显示一个名称、一个值和一个按钮，当单击该按钮时，我希望弹出其余信息。

 <c:forEach var="i" varStatus="curr" items="${items}">
    <tr>
            <td>
                ${i.itemName}
            </td>
             <td>
                ${i.itemValue}
            </td>
             <td style="float:right;">
            <input type="button" id="showhide">
            </td>
     </tr>
     <tr>
        <td class="toggle">
            ${i.itemAltName}
            ${i.itemAdditions}
            ${i.itemValueAfterAdditions}
        </td>
    </tr>   
</c:forEach>

我正在使用以下 JS。

<script type="text/javascript">
        var buttons = document.getElementById('showhide');

        buttons.onclick = function() {
            var div = document.getElementsByClassName('toggle');
            var x = div.length;
            for(var i = 0; i < x; ++i){
                if (div[i].style.display !== 'none') {
                    div[i].style.display = 'none';
                }
                else {
                    div[i].style.display = 'block';
                }
            }
        };
</script>

此外，在这里说明显而易见的，但我的风格领域有：

.toggle{
display:none;
}

目前只有第一个按钮可以正确打开对应的文字。从我看到的其他答案来看，我知道我需要使 ID 唯一，但我不确定如何使用 JSP 循环来做到这一点。帮忙？

Answer 1

与其他答案相比的不同方法，使用 varStatus（由 Jozef Chocholacek 建议）获取唯一 ID。

无论按钮和链接的 td 在哪里（它们不必是兄弟），您都可以使用解决方案。

你的 JSP :

 <c:forEach var="i" varStatus="curr" items="${items}" varStatus="loop">
    <tr>
            <td>
                ${i.itemName}
            </td>
             <td>
                ${i.itemValue}
            </td>
             <td style="float:right;">
            <input type="button" class="showhide" id="showHideButton_${loop.index}">
            </td>
     </tr>
     <tr>
        <td class="toggle" id="data_${loop.index}">
            ${i.itemAltName}
            ${i.itemAdditions}
            ${i.itemValueAfterAdditions}
        </td>
    </tr>   
</c:forEach>

在下面的代码片段中使用 JS：

var buttons = document.getElementsByClassName('showhide');

for (var i=0;i<buttons.length;i++) {
 buttons[i].addEventListener("click", clickHandler);

}

function clickHandler(event) {
 var buttonId = event.target.id; 
 var rowId = buttonId.split("_")[1];
 var rowData = document.getElementById('data_' + rowId);
 
 // do whatever you want with your row 
 if (rowData.style.display !== 'none') {
  rowData.style.display = 'none';
 } else {
  rowData.style.display = 'block';
 }
}

<table>
  <tr>
   <td>Name</td>
   <td>Value</td>
   <td>Action</td>
  </tr> 
     <tr>
            <td>
                Item Name 1
            </td>
             <td>
                Item Value 1
            </td>
             <td style="float:right;">
    <input type="button" class="showhide" id="showHideButton_98" value="Toggle">
            </td>
     </tr>
     <tr>
        <td class="toggle" id="data_98">
            itemAltName1
            itemAdditions1
            itemValueAfterAdditions1 
        </td>
    </tr> 
    <tr>
            <td>
                Item Name 2
            </td>
             <td>
                Item Value 2
            </td>
             <td style="float:right;">
    <input type="button" class="showhide" id="showHideButton_55" value="Toggle">
            </td>
     </tr>
     <tr>
        <td class="toggle" id="data_55">
            itemAltName2
            itemAdditions2
            itemValueAfterAdditions2 
        </td>
    </tr>

在 JSP/JS forEach 循环中只有第一个按钮打开

Only first button opens in JSP/JS forEach loop

javascript

jsp

jstl