Show/Hide 立即输入下一个元素

Question

我试图在 div 中显示隐藏紧接着的下一个输入，但它会打开所有输入我也试过

`$(this).next("input").show();` ( traversing )

似乎没有任何效果。有什么帮助吗？

这是我的http://jsfiddle.net/526stLtg/1/

Answer 1

您需要使用siblings() and for toggling visibility use toggle()

$(document).ready(function() {
  $(".add-guest > button").click(function() {
    $(this).siblings('input').toggle();
  });
});

.add-guest input[type="text"] {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="add-guest">
  <b>Bride:</b> 
  <button id="bride">Add</button>
  <br>
  <input type="text" name="Bride">
</div>
<br/>
<br/>
<div class="add-guest">
  <b>Groom:</b> 
  <button id="bride">Add</button>
  <br>
  <input type="text" name="Bride">
</div>

Answer 2

您可以使用 this 来引用 html 元素并使用 .parent() and .find():

$(document).ready(function() {
  $(".add-guest > button").click(function() {
    $(this).text() === "Add" ? $(this).text("Remove") : $(this).text("Add");
    $(this).parent().find("input").toggle();
  });
});

.add-guest input[type="text"] {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-guest">
  <b>Bride:</b> 
  <button id="bride">Add</button>
  <br>
  <input type="text" name="Bride">
</div>
<br/>
<br/>
<div class="add-guest">
  <b>Groom:</b> 
  <button id="bride">Add</button>
  <br>
  <input type="text" name="Bride">
</div>

此外，您还可以使用 .toggle() instead of .show。

Answer 3

您可以使用 $(this) 来 select 单击的按钮（事件触发器）。

然后，如果您查看代码，您会发现下一个元素是 <br/>，下一个元素是您要显示的 <input>。所以，如果你改变：

$(".add-guest > input").show();

到

$(this).next().next().show();

它会起作用的。你可以认为你也可以使用 selector 来找到第一个被 selector 过滤的兄弟，即

$(this).next('input').show();

但这不起作用。这将检查兄弟姐妹是否可以使用 paseed selector selected。但是你可以使用 .nextAll('input')，只是因为在这种情况下只有一个兄弟可以像这样被选择。如果没有，你可以使用这个 selector 和 .first()

您的原始代码 select 将所有输入都放在带有 .add-guest class 的元素之前，这不是您想要的。

Answer 4

如果 div 中有多个输入元素，而您只想 select 第一个输入元素，则使用 :first 伪 class

  $(this).parent().find("input:first").toggle();

Show/Hide 立即输入下一个元素

Show/Hide Immediate next element Input

javascript

jquery

frontend