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

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

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

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

 $('.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()这两个图标。

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

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

 .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>