Question

这是我的HTML代码

<label for="first_name">First Name</label>
<input class="w3-input" type="text" name="first_name" id="first_name">

<label for="last_name">Last Name</label>
<input class="w3-input" type="text" name="last_name" id="last_name">

当我点击输入时我需要隐藏标签以获得我在jquery代码之后创建的结果但是没有工作。

$(document).ready(function(){

 $(".w3-input").click(function(){
    var item_select = this.id; //getting id of clicked item

     $(item_select).focusin(function(){
        $(this).prev("label").hide(); //hide label of clicked item 
    });
      $(item_select).focusout(function(){
        $(this).prev("label").show();
    });
 });

});

我的代码有什么问题，任何人都可以帮助我吗？

由于

Answer 1

您真的不需要click。

$(document).ready(function(){
  $(".w3-input").focusin(function(){
    $("label[for='" + $(this).attr("id") + "']").hide();
  });
  $(".w3-input").focusout(function(){
    $("label[for='" + $(this).attr("id") + "']").show();
  });
});

Fiddle

Answer 2

使用$('#'+item_select)

$(document).ready(function(){

 $(".w3-input").click(function(){
    var item_select = this.id; //getting id of clicked item
        console.log(item_select)
     $('#'+item_select).focusin(function(e){//add # to target id
        $(this).prev("label").hide(); //hide label of clicked item 
    });
      $('#'+item_select).focusout(function(){//add # to target id
        $(this).prev("label").show();
    });
 });

});

demo

如果您没有点击输入，则解决方案无效。删除点击事件正常

DEMO

Answer 3

问题是你在focusin处理程序中注册click处理程序，当点击发生时，焦点因素被触发然后点击，所以在第一次点击期间没有{{1}处理程序被触发。还有其他问题，例如每次点击都会添加越来越多的处理程序。

无需点击事件

＆＃13;

focusin

＆＃13;

$(function() {

  $(".w3-input").focus(function() {
    $(this).prev("label").hide(); //hide label of clicked item 
  }).blur(function() {
    $(this).prev("label").show();
  });

});

＆＃13;

如何在进出焦点时显示和隐藏输入标签

3 个答案: