如何根据输入文本字段隐藏或显示类

Question

用于清除文本字段中的文本

我已经按名称明确提出了一个课程

http://jsfiddle.net/Loa3go9w/1/

如果只有textinput有一些数据或者类消失的话，如何使类（searchClear_btn）显示？

$("#devsearchinputtext").val('This is test');
$("#devsearchinputtext").after('<a class="searchClear_btn">Clear</a>');
$(document).on('click', '.searchClear_btn', function(event) {
  $("#devsearchinputtext").val('');
    event.stopImmediatePropagation();
      event.preventDefault();
      return false;
});

你能否告诉我如何实现这个目标

Answer 1

如果输入有文本，您可以绑定keyup事件和显示按钮。

$("#devsearchinputtext").on('keyup', function(){
    $('.searchClear_btn').toggle(!!this.value && !!this.value.length)
}).trigger('keyup');

DEMO

Answer 2

您希望在文本字段中侦听任何输入更改，并检查文本框的值是否大于0。

$('#devsearchinputtext').on('input',function(e){
   if ($(this).val().length > 0) {
      $(".searchClear_btn").hide();
   } else {
      $(".searchClear_btn").show();
   }
});

input事件通常比keyup更有效，因为它还会侦听复制和粘贴等事件。