Мне нужна определенная jquery или js функция для отображения onclick:

<div id="resultTab">
  <input id="help_button" type="button" value="Full Info"/>
  <div id="help">Table with data</div>
  <input id="help_button" type="button" value="Full Info"/>
  <div id="help">Table with data</div>
  <input id="help_button" type="button" value="Full Info"/>
  <div id="help">Table with data</div>
</div>

Это можно повторить 50-100 раз. Поэтому, когда я нажимаю кнопку, она должна показывать только <div>, который написан после этого <button>, а не все <div>

Примечание: все кнопки и элементы div созданы jquery, поэтому я не могу указать конкретный идентификатор для использования в функции.

Пожалуйста, помогите мне решить эту проблему. Я полностью стек, если это возможно, я хочу, чтобы отображать <div> в середине страницы, как всплывающее окно.

ОБНОВЛЕНИЕ . Функция работает, но в этой ситуации не работает, что я могу сделать?

0
Abdulin 6 Янв 2017 в 13:08

4 ответа

Лучший ответ

Не используйте один и тот же идентификатор везде, идентификатор должен быть уникальным. Я изменил ваши KID на класс

$('input.help_button').click(function () {
  $(this).next(".help").toggle()
})
.help { display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
3
Carsten Løvbo Andersen 6 Янв 2017 в 10:13

Вы не должны иметь одинаковые идентификаторы, прикрепленные к нескольким элементам. Вы можете использовать next () , чтобы выбрать следующий элемент после кнопки и slideToggle () , чтобы показать / скрыть элемент div:

$('input[type="button"]').on('click', function(){
   $(this).next('.help').slideToggle();
});
.help{
  display: none;
}
input[type='button']{
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="resultTab">
  <input id="help_button_1" type="button" value="Full Info">
  <div id="help_1" class="help">Table with data</div>
  <input id="help_button_2" type="button" value="Full Info">
  <div id="help_2" class="help">Table with data</div>
  <input id="help_button_3" type="button" value="Full Info">
  <div id="help_3" class="help">Table with data</div>
</div>
1
Ionut Necula 6 Янв 2017 в 10:24

Если вы используете toggle(), вы можете скрыть и показать div

$('input.help_button').click(function () {
  $(this).next(".help").toggle()
})
.help { display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
1
Jishnu V S 6 Янв 2017 в 10:12
$("button").on("click", function() {
 $(this).next().show();
});
1
NoseBagUK 6 Янв 2017 в 10:12