如何使用Jquery仅使1个输入框聚焦动画

Question

小提琴和代码：

 $(document).ready(function(){ $("input").focus(function(){ $(".fakeplaceholder").addClass("fakeplaceholdertop"); }); $("input").blur(function(){ if(!$('input').val()) { $(".fakeplaceholder").removeClass("fakeplaceholdertop"); } }); }); 

 .accountbox { background-color:#ffffff; padding: 15px 120px 50px 50px; } :focus{outline: none;} .input1div { display:inline-block; position: relative; } .input1div input { font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px; } .input1div input {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;} .input1div input ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;} .input1div input:focus ~ .focus-border{width: 100%; transition: 0.4s;} .fakeplaceholder { position: absolute; pointer-events: none; top: 10px; color:#8c8c8c; transition: 0.28s ease all; } .fakeplaceholdertop { top: -10px; font-size:10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="accountbox"> <p style="font-size:25px;font-weight:600;">Sign Up</p> <form class="accountform"> <div class="input1div"> <input class="firstname" type="text" name="firstname" /> <span class="fakeplaceholder">First Name</span> <span class="focus-border"></span> </div> <br/><br/><br/> <div class="input1div"> <input type="text" name="lastname" /> <span class="fakeplaceholder">Last Name</span> <span class="focus-border"></span> </div> </form> </div> 

如您所见，如果我单击1个输入框，则另一个也将执行相同的动画。 我如何才能仅使单击的输入框执行此动画。

预期结果：

1. 单击时，假占位符将上升（仅单击的占位符）
2. 如果输入框具有某些值，则伪造的占位符将保留下来。

Answer 1

使用$(this).next(".fakeplaceholder") 。

$("input").focus(function() {
  $(this).next(".fakeplaceholder").addClass("fakeplaceholdertop");
});
$("input").blur(function() {
  if (!$('input').val()) {
    $(this).next(".fakeplaceholder").removeClass("fakeplaceholdertop");
  }
});

fakeplaceholder您关注的输入之后， fakeplaceholder类定位下一个元素

 $(document).ready(function() { $("input").focus(function() { $(this).next(".fakeplaceholder").addClass("fakeplaceholdertop"); }); $("input").blur(function() { if (!$(this).val()) { $(this).next(".fakeplaceholder").removeClass("fakeplaceholdertop"); } }); }); 

 .accountbox { background-color: #ffffff; padding: 15px 120px 50px 50px; } :focus { outline: none; } .input1div { display: inline-block; position: relative; } .input1div input { font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px; } .input1div input { border: 0; padding: 7px 0; border-bottom: 1px solid #ccc; } .input1div input~.focus-border { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s; } .input1div input:focus~.focus-border { width: 100%; transition: 0.4s; } .fakeplaceholder { position: absolute; pointer-events: none; top: 10px; color: #8c8c8c; transition: 0.28s ease all; } .fakeplaceholdertop { top: -10px; font-size: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="accountbox"> <p style="font-size:25px;font-weight:600;">Sign Up</p> <form class="accountform"> <div class="input1div"> <input class="firstname" type="text" name="firstname" /> <span class="fakeplaceholder">First Name</span> <span class="focus-border"></span> </div> <br/><br/><br/> <div class="input1div"> <input type="text" name="lastname" /> <span class="fakeplaceholder">Last Name</span> <span class="focus-border"></span> </div> </form> </div> 

Answer 2

 $(document).ready(function(){ $("input").focus(function(){ $(this).next().addClass("fakeplaceholdertop"); }); $("input").change(function(){ if($(this).val()==""){ $(this).next().removeClass("fakeplaceholdertop"); }else{ $(this).next().addClass("fakeplaceholdertop"); } }); }); 

 .accountbox { background-color:#ffffff; padding: 15px 120px 50px 50px; } :focus{outline: none;} .input1div { display:inline-block; position: relative; } .input1div input { font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px; } .input1div input {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;} .input1div input ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;} .input1div input:focus ~ .focus-border{width: 100%; transition: 0.4s;} .fakeplaceholder { position: absolute; pointer-events: none; top: 10px; color:#8c8c8c; transition: 0.28s ease all; } .fakeplaceholdertop { top: -10px; font-size:10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="accountbox"> <p style="font-size:25px;font-weight:600;">Sign Up</p> <form class="accountform"> <div class="input1div"> <input class="firstname" type="text" name="firstname" /> <span class="fakeplaceholder">First Name</span> <span class="focus-border"></span> </div> <br/><br/><br/> <div class="input1div"> <input type="text" name="lastname" /> <span class="fakeplaceholder">Last Name</span> <span class="focus-border"></span> </div> </form> </div> 

Answer 3

您正在将动画应用于所有匹配的元素。 使用this来定位当前元素以执行动画。 试试这个

$(this).parent().find(".fakeplaceholder").addClass("fakeplaceholdertop");

$(this).parent().find(".fakeplaceholder").removeClass("fakeplaceholdertop");

Answer 4

您只需添加单独的ID即可访问不同的字段。

<span class="fakeplaceholder" id="first">First Name</span>
<span class="fakeplaceholder" id="last">Last Name</span>

然后将fakeplaceholdertop类应用于特定元素。

$(".firstname").focus(function() {
    $("#first").addClass("fakeplaceholdertop");
});

$(".lastname").focus(function() {
    $("#last").addClass("fakeplaceholdertop");
});