Динамически создаваемая функция JavaScript, которая будет скрывать и отображать div на странице JSP

Question

Мой код JSP:

<c:forEach var="batchException" items="${batchExceptionType}">
<button> ${batchException.key}</button>
<div id="${batchException.key}">
...
</div>
</c:forEach>

batchExceptionType - это карта, исходящая из кода Java с использованием JSTL.

Я хочу скрыть и отобразить div при нажатии кнопки.

Поскольку количество созданных div не фиксировано.Поэтому я не уверен, как создавать функции JavaScript для скрытия и отображения этого div

Заранее спасибо.

Answer 1

попробуйте

<c:forEach var="batchException" items="${batchExceptionType}">
<button onclick="hideShowDiv(${batchException.key})"> ${batchException.key}</button>
<div id="${batchException.key}">
...
</div>
</c:forEach>

, а затем в сценарии

<script>
   function hideShowDiv(divId){
      $(#divId).toggle();
   }

</script>

Answer 2

Вы можете сделать это также с помощью чистого решения CSS.с помощью флажка ввода и его свойства стиля :checked.

<label class="button" for="toggle-1">${batchException.key}</label>
<input type="checkbox" id="toggle-1">
<div id="${batchException.key}">

и CSS:

div {
       display: none
}

input[type=checkbox]:checked + div {
       display: inherit;
}

лучше объяснено здесь .