Question

我的HTML代码看起来像这样

<div class="wrap">
  <div class="inputs">
      <input type="text">
      <p>X</p>
  </div>
    <div class="inputs">
      <input type="text">
      <input type="text">
      <p>x</p>
  </div>
</div>

我想要实现的目标是：

如果输入有焦点，则显示下一段。
如果输入失去了焦点，请隐藏下一个paragprah。
如果div.inputs有多个输入，请不要隐藏段落，直到其中一个输出焦点为止。

我为它创建了这个jQuery代码

$(".inputs p").hide();

$(".inputs").focusin(function () {
  $(this).find("p").slideDown();
});

$(".inputs").focusout(function () {
  $(this).find("p").slideUp();
});

它可以工作，但是对于有多个输入的div.inputs，它开始隐藏段落然后再开始显示它。

我的代码出了什么问题？

Answer 1

不要将JavaScript用于CSS的工作。

.inputs>p {
    display: none;
}
.inputs>input:focus~p {
    display: block;
}

Answer 2

像Niet the Dark Absol一样，我会主张尽可能使用CSS（也适用于动画）。但是如果你真的需要通过jQuery处理这个问题，你可以简单地添加.stop()，以便在相同输入组内的输入之间改变焦点时防止上/下动画。

$(".inputs p").hide();

$(".inputs").focusin(function () {
  $(this).find("p").stop().slideDown();
});

$(".inputs").focusout(function () {
  $(this).find("p").stop().slideUp();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="inputs">
      <input type="text">
      <p>X</p>
  </div>
    <div class="inputs">
      <input type="text">
      <input type="text">
      <p>x</p>
  </div>
</div>

Answer 3

$(function(){
$('p').hide();
$("input[type=text]").focusin(function() {
    $(this).parents("div.inputs").find('p').show();
});
$("input[type=text]").focusout(function() {
    $(this).parents("div.inputs").find('p').hide();
});
})

jQuery - 检测孩子是否有输入

3 个答案: