为什么我的元素没有按预期清空？答案

【问题标题】：Why isn't my element being emptied as expected?为什么我的元素没有按预期清空？
【发布时间】：2018-05-14 16:31:02
【问题描述】：

我确定这很简单，但我被卡住了。

我有一个输入，当输入一个值时，我想将此值附加到 <span> 元素。从输入中删除值后，我还想将其从 <span> 元素中删除。

我遇到的问题是输入值已被删除，但 html 的“名称”仍然存在。

<input type="search" id="searchName" type="text">
<div id="searchFilter">
  <p><span id="filterName"></span></p>
</div>

$('#searchName').keyup(function() {
  if ($('#searchName').length > 0) {
    $("#filterName").text('Name: ' + $('#searchName').val());
  } else {
    $("#filterName").empty();
  }
});

感谢任何帮助。

【问题讨论】：

看起来.empty() 从来没有被调用过。你永远不会进入那个 else 语句

标签： javascript jquery html

【解决方案1】：

评估val() 的长度，而不是元素本身：

$('#searchName').keyup(function() {
  if ($('#searchName').val().length > 0) {
    $("#filterName").text('Name: ' + $('#searchName').val());
  } else {
    $("#filterName").empty();
  }
});

Fiddle

【讨论】：

请记住，如果通过单击 x 清除元素，这将不起作用
感谢@blackandorangecat - 可能是一个单独的问题，但如果通过单击 x 清除元素怎么办？
@TheOrdinaryGeek $('#searchName').on('search', function () { $("#filterName").empty(); });
在上面的答案上方/下方添加（新听众）。
@TheOrdinaryGeek stackoverflow.com/questions/2977023/…

【解决方案2】：

有一些修改。没关系:-)

$('#searchName').on("keyup",function() {
  if ($('#searchName').val() != "") {
    $("#filterName").text('Name: ' + $('#searchName').val());
  } else {
    $("#filterName").text("");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search" id="searchName" type="text">
<div id="searchFilter">
  <p><span id="filterName"></span></p>
</div>

【讨论】：

【解决方案3】：

将if中的条件改为：

$('#searchName').val().length > 0

【讨论】：

【解决方案4】：

如果您将 keyup 分配给 body 元素，而不是输入框本身，那么它将注册事件并工作 -

$('body').keyup(function() {
  if($('#searchName').length > 0) {
    $("#filterName").text('Name: ' + $('#searchName').val());
  } else {
    $("#filterName").empty();
  }
});

小提琴链接 - https://jsfiddle.net/age3nyph/4/

【讨论】：

【解决方案5】：

我会处理 'search' 和 'keyup' 事件来说明用户点击 'x' 和用户在字段中输入的情况。见JSFiddle Example

$('#searchName').on('keyup', function() {
updateFilter(this);
});

$('#searchName').on('search', function(){
updateFilter(this);
});

function updateFilter(element){
if ($(element).val().length > 0) {
    $("#filterName").text('Name: ' + $(element).val());
 } else {
$("#filterName").empty();
 }
};

编辑：更新了指向 JSFiddle 设置的链接以使用 JQuery。原始链接排除了该更新。

【讨论】：