Question

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

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

似乎什么都没有用。有帮助吗？

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

Answer 1

您需要使用 siblings() 并使用 toggle()

来切换可见性

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

此外，您可以使用.toggle()代替.show。

Answer 3

您可以使用$(this)选择点击的按钮（事件触发器）。

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

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

到

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

它会起作用。您可以认为您也可以使用选择器来查找由选择器过滤的第一个兄弟，即

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

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

您的原始代码选择了所有输入前面带有.add-guest类的元素，这不是您想要做的。

Answer 4

如果div中有多个输入元素，并且您只想选择第一个输入元素，那么使用:first伪类

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

显示/隐藏立即下一个元素输入

4 个答案: