Question

我需要具体的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>

注意：由jquery创建的所有按钮和div，因此我无法在功能中使用特定ID。

请帮我解决这个问题。我完全堆叠，如果可能的话我想在页面中间显示<div>，就像弹出窗口一样。

更新：该功能正在运行，但在此situation无效，我该怎么办？

Answer 1

不要在任何地方使用相同的ID，ID必须是独一无二的。我将您的ID更改为Class

＆＃13;

$('input.help_button').click(function () {
  $(this).next(".help").toggle()
})

＆＃13;

.help { display: none}

＆＃13;

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

＆＃13;

Answer 2

$("button").on("click", function() {
 $(this).next().show();
});

Answer 3

如果您使用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>

Answer 4

您不应该将多个元素附加相同的ID。您可以使用 next() 选择按钮后面的下一个元素，然后 slideToggle() 显示/隐藏div：

＆＃13;

$('input[type="button"]').on('click', function(){
   $(this).next('.help').slideToggle();
});

＆＃13;

.help{
  display: none;
}
input[type='button']{
  display: block;
}

＆＃13;

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

＆＃13;

onclick显示<div>，它是在<button>之后写的（不是所有div）

4 个答案: