Question

我想根据输入值更改图标。如果输入具有值，那么我想显示fa-check图标。如果输入没有值，那么我想显示fa-arrow-right。

在blur或keypress之间我有点困惑；我应该为此使用哪一个？如果还有其他选择，请分享。

$('.provide-input').keypress(function() {
    if ($(this).val().length === 0) {
        $('.fa-arrow-right').hide();
        $('.fa-check').show();
    } else {
        $('.fa-check').hide();
        $('.fa-arrow-right').show();
    }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<div class="form-group">
    <i class="fa fa-arrow-right provide-icon"></i>
    <i class="fa fa-check provide-icon"></i> 
    <input type="text" class="provide-input" /> 
      this is treatment field
</div>

Answer 1

尝试使用事件委托（input）方法处理on事件。这种方法的优点是-事件对于动态创建的元素（具有该类）也将起作用。我还将建议您trim()之前先取length的值。

由于初始值为空，因此可以初始隐藏箭头。

$('.fa-arrow-right').hide();
$(document).on('input', '.provide-input', function () {
  if ($(this).val().trim().length === 0) {
    $('.fa-arrow-right').hide();
    $('.fa-check').show();
  }
  else {
    $('.fa-check').hide();
    $('.fa-arrow-right').show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<div class="form-group">
  <i class="fa fa-arrow-right provide-icon"></i><i class="fa fa-check provide-icon"></i> <input type="text" class="provide-input" />  this is treatment field  
</div>

Answer 2

您可以使用input事件而不是keypress来完成这项工作。这样，也将触发事件以获取通过鼠标事件粘贴添加的内容。然后，您可以根据字段中值的长度toggle() $('.provide-input').on('input', function() { var showCheck = $(this).val().trim().length !== 0; var $group = $(this).closest('.form-group'); $group.find('.fa-arrow-right').toggle(!showCheck); $group.find('.fa-check').toggle(showCheck); });两个图标。

请注意，如果您有多个与各个字段相关的复选框，则需要使用DOM遍历来仅查找与引发事件的字段相关的图标。试试这个：

.fa.fa-check { 
  display: none; 
  color: #0C0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<div class="form-group">
  <i class="fa fa-arrow-right provide-icon"></i>
  <i class="fa fa-check provide-icon"></i> 
  <input type="text" class="provide-input" /> 
  this is treatment field 1
</div>
<div class="form-group">
  <i class="fa fa-arrow-right provide-icon"></i>
  <i class="fa fa-check provide-icon"></i> 
  <input type="text" class="provide-input" /> 
  this is treatment field 2
</div>

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE log4j:configuration SYSTEM "log4j.dtd">
<log4j:configuration>

<appender name="DB" class="org.apache.log4j.jdbc.JDBCAppender">
<param name="URL" value="jdbc:mysql://localhost/mydb"/>
<param name="driver" value="com.mysql.cj.jdbc.Driver"/>
<param name="user" value="root"/>
<param name="password" value="password"/>
<param name="sql" value="INSERT INTO LOGS VALUES('%x','%d','%C','%p','%m')"/>

<layout class="org.apache.log4j.PatternLayout"></layout>
</appender>

<logger name="log4j.rootLogger" additivity="false">
  <level value="DEBUG"/>
  <appender-ref ref="DB"/>
</logger>

 <root>
 <priority value="TRACE"/>
 <appender-ref ref="DB"/>
 </root>

</log4j:configuration>

如何根据输入值更改图标？

2 个答案: