Только первая кнопка открывается в цикле JSP / JS forEach

Question

Только первая кнопка открывается в цикле JSP / JS forEach

1

Итак, у меня есть страница 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;
}

В настоящее время только первая кнопка правильно открывает соответствующий текст. Из других ответов, которые я видел, я знаю, что мне нужно сделать идентификатор уникальным, но я не уверен, как это сделать с циклом JSP. Помогите?

Terry 26 окт. 2017, в 16:51

Источник

1

Возможный дубликат Как получить значение индекса из цикла foreach в jstl
Jozef Chocholacek 26 окт. 2017, в 14:16

Теги:

javascript

jsp

jstl

1 ответ

Ещё вопросы

Возможный дубликат Как получить значение индекса из цикла foreach в jstl

Guillaume Georges · Accepted Answer · 2017-10-26T12-54-00.000Z

Другой подход по сравнению с другим ответом, используя varStatus (предложенный Jozef Chocholacek) для получения уникальных идентификаторов.

Это позволит вам иметь решение, работающее независимо от того, где кнопка и связанный тд (они не должны быть братьями и сестрами).

Ваш 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>

Это на самом деле звучит очень полезно. Я попробую это. Спасибо!