Question

基本上我要做的是最初隐藏跨度并在我单击输入字段时显示相应的跨度，当您离开该输入字段时，该跨度消失。

所以我的表格看起来像这样（简化）：

<form id="form">
  <div id="contact-div-1">
    <input type="text" placeholder="First Name" name="FNAME" class="field validation" id="mce-FNAME">
  </div>
  <span>
    Please Enter Your First Name
  </span>
  <div id="contact-div-2">
    <input  type="text" placeholder="Last Name" name="LNAME" class="field validation" id="mce-LNAME">
  </div>
  <span>
    Please Enter Your Last Name
  </span>
  <div id="contact-div-3">
    <input type="text" placeholder="E-mail Address" name="EMAIL" class="field validation" id="mce-EMAIL">
  </div>
  <span>
    Please Enter A Valid E-mail Address
  </span>
</form>

这是我目前使用的JavaScript代码，但它无法正常运行。

$("#form span").hide();
$("input").focus(function(){
    $(this).next('span').fadeIn("slow");
}).blur(function(){
    $(this).next('span').fadeOut("slow");
}); //end blur

Answer 1

<span>元素是包含每个<div>的父<input>个元素的兄弟元素，因此您需要使用$(this).parent()：

$("input").focus(function(){
    $(this).parent().next('span').fadeIn("slow");
}).blur(function(){
    $(this).parent().next('span').fadeOut("slow");
});

Example on JSFiddle

此外，为了减少代码中的重复，可以使用.bind()与.fadeToggle()合并“焦点”和“模糊”处理程序：

$("input").bind("focus blur", function() {
    $(this).parent().next("span").fadeToggle("slow");
});

Updated JSFiddle

Answer 2

输入旁边没有任何内容，请尝试

$(this).parent().next('span').fadeIn("slow");

Answer 3

工作代码：

<强> HTML

<form id="form">
  <div id="contact-div-1">
    <input type="text" placeholder="First Name" name="FNAME" class="field validation" id="mce-FNAME">
      <span> Please Enter Your First Name </span>
  </div>
  <div id="contact-div-2">
    <input  type="text" placeholder="Last Name" name="LNAME" class="field validation" id="mce-LNAME">
  <span> Please Enter Your Last Name </span>
  </div>
  <div id="contact-div-3">
    <input type="text" placeholder="E-mail Address" name="EMAIL" class="field validation" id="mce-EMAIL">
  <span> Please Enter A Valid E-mail Address </span>
  </div>
</form>

<强> JS

$("#form span").hide();

$("input").on('focus', function(){
   var s = $(this).siblings('span');
    s.fadeIn("slow");
}).blur(function(){
    $(this).next('span').fadeOut("slow");
});

小提琴：Working fiddle

Answer 4

由于你的跨度是父div的兄弟，而不是输入，你必须导航到div

$("#form span").hide();
$("input").focus(function(){
    $(this).parent().next('span').fadeIn("slow");
}).blur(function(){
    $(this).parent().next('span').fadeOut("slow");
}); //end blur

如果您可以控制HTML，并且span和input都保存相关信息，那么将它们放在一起（即同一div的子节点）也可能是有意义的。那么你的原始js代码就可以了。

Answer 5

<强> HTML

<form id="form">
  <div id="contact-div-1">
    <input type="text" placeholder="First Name" name="FNAME" class="field validation" id="mce-FNAME">
        <span>
    Please Enter Your First Name
  </span>
  </div>

  <div id="contact-div-2">
    <input  type="text" placeholder="Last Name" name="LNAME" class="field validation" id="mce-LNAME">
        <span>
    Please Enter Your Last Name
  </span>
  </div>

  <div id="contact-div-3">
    <input type="text" placeholder="E-mail Address" name="EMAIL" class="field validation" id="mce-EMAIL">
        <span>
    Please Enter A Valid E-mail Address
  </span>
  </div>

</form>

<强> JQuery的

$("#form span").hide();
$("input").focus(function(){
    $(this).next('span').fadeIn("slow");
}).blur(function(){
    $(this).next('span').fadeOut("slow");
});

DEMO

Answer 6

你可以给你的跨度提供id，这些id是相应输入的name属性的函数，然后直接以这种方式引用它们......这样你也不会被俘虏你改变了层次结构不是等的设计。

例如：

<span id="span_FNAME">...</span>

然后jquery

$("input").focus(function() {
    var s = '#span_'+$(this).attr("name");
    $(s).fadeIn("slow")
...

jQuery - 单击时选择非兄弟元素

6 个答案: