javascript - 更改输入图标并删除以前的图标(Jquery)

Question

我有一个输入字段，我想根据输入字段中是否有任何数据显示图标(如果没有数据则发出警告，如果输入字段已填充则检查图标)

我的代码是:

$(".input-icon").blur(function(){
  if($(this).val()) {
    $(this).before('<i class="fa fa-check text-complete left-info"></i>');
  } else {
    $(this).before('<i class="fa fa-warning text-warning left-info"></i>');
  }
});

所以我遇到的问题是:

1. 如果有现有数据，我想在用户加载页面时显示图标

2. 如果该字段有数据，它将显示一个复选图标，但如果从该字段中删除数据，它将显示两个图标，我想破坏另一个图标，只显示一个。

我尝试在 if 语句中创建更改图标和 empty()，但我的输入字段被删除而不是图标。

Answer 1

您可以搜索 i 元素并将其删除。

$(this).siblings('i').remove();

在 jQuery 中有许多不同的选择器和功能来查找您需要的元素。在您的情况下，它应该是 siblings，因为您的图标与您的输入处于同一级别。

另一种方法是获取对 parent 元素的引用。

var parent = $(this).parent();
parent.find('i').remove();

仅供引用的最佳做法是保存 $(this) 的引用。

$(".input-icon").blur(function(){
  var self = $(this);
  self.siblings('i').remove();
  if(self.val()) {
    self.before('<i class="fa fa-check text-complete left-info"></i>');
  } else {
    self.before('<i class="fa fa-warning text-warning left-info"></i>');
  }
});