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>');
  }
});

所以我遇到的问题是：

如果有现有数据，我想在用户加载页面时显示图标
如果该字段有数据，它将显示一个检查图标，但如果数据从字段中删除，它将显示彼此的两个图标，我想销毁另一个图标，只显示一个。< / p>

我尝试在更改时创建图标，在if语句中创建一个空（），但是删除了我的输入字段而不是图标。

Answer 1

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

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

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

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

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

Fyi最佳做法是保存$(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>');
  }
});

Answer 2

在方法将指定内容插入选择器之前

。试试这段代码。

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

更改输入上的图标并删除以前的图标（Jquery）

2 个答案: