Question

我想在已填写的文本字段的标签上删除类"visuallyhidden"。所以当我开始在输入字段中输入内容时，我希望清除类"visuallyhidden"以便标签出现在输入字段上方。但是，当我从该输入字段中删除文本时，我希望将类"visuallyhidden"添加回相应的标签。

<label for="firstname" class="visuallyhidden">First Name</label>
<input type="text" id="firstname" placeholder="First Name"/>

<label for="lastname"  class="visuallyhidden">Last Name</label> 
<input type="text" id="lastname"  placeholder="Last Name"/>

我对jQuery的尝试失败，这有点起作用，但会影响所有标签

$('input').keypress(function() {
    $('label').addClass('visuallyhidden');
});
$('input').blur(function() {
    if( !$(this).val() ) {
        $('label').removeClass('visuallyhidden');
    }
});

Answer 1

要定位特定label，您只需traverse the DOM with jQuery methods ...

$('input').keypress(function() {
    $(this).prev('label').addClass('visuallyhidden');
});
$('input').blur(function() {
    if( !$(this).val() ) {
        $(this).prev('label').removeClass('visuallyhidden');
    }
});

请参阅：jQuery .prev()

$(this).prev('label')抓住与$(this)选择器匹配的'label'前一个兄弟姐妹。

Answer 2

您可以使用jQuery toggleClass()方法，如下所示：

＆＃13;

$(":input").on("keyup", function() {
  $(this).prev("label").toggleClass("visuallyhidden", (this.value==""))
});

＆＃13;

.visuallyhidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="firstname" class="visuallyhidden">First Name</label>
<input type="text" id="firstname" placeholder="First Name" />

<label for="lastname" class="visuallyhidden">Last Name</label>
<input type="text" id="lastname" placeholder="Last Name" />

＆＃13;

填写相应的输入字段时删除标签的类

2 个答案: