Javascript 根据输入字段中是否有值，按钮应显示/隐藏

现在，当输入被添加到输入字段时，按钮显示，但是如果我删除输入，按钮不会隐藏

我唯一的解决办法是将函数分成两个独立的函数。 也就是说，一个在单击时将输入添加到输入字段，然后另一个函数跟踪input.val，并控制按钮的隐藏/显示效果

这样做会更好吗

$("#peopleInPopup").on('click', '.list-group-item', function() {
  var peopleName = $(this).children("span").text();
  var peopleID = $(this).children("span").attr("class");
  var input = $("#friendsNames");
  input.val(input.val() + peopleName + "");
  if (input.val().length === 0) {
    $("#checkButton").toggle(false);
    console.log("button should NOT display");
  } else {
    console.log("button should display");
    $("#checkButton").toggle(true);
  }
  $("#checkButton").click(function() {
    var newParticipants = input.val();
    socket.emit("addParticipantsToConversation", newParticipants);
    $("#chatToInfo").append(", ", input.val());
    $("#friendsNames").val("");
    $(":mobile-pagecontainer").pagecontainer("change", $("#pagefour"), {
      transition: "slidedown"
    });
  });
});

---

也许只需要使用show和hide来代替jQuery？我假设您希望在输入发生变化时发生这种情况，因此我引入了keyup（可以使用onChange或其他方法）

稍微调整一下你的代码

$('input').on('keyup', function (event) {
  let value = event.target.value;

  if (value && value !== '' && value.length > 0) {
    $('#myButton').show();
  } else {
    $('#myButton').hide();
  }
})

带有标记

<input id='input' />
<button id='myButton'>GO</button>

---

玩这个把戏吗？

实际上我刚刚找到了解决问题的办法。下面的代码使其工作：

$（“#peopleInPopup”）。在（'单击'，'上。列出组项'，函数（）{
var peopleName=$（this.children（“span”）.text（）；
var peopleID=$（this）.children（“span”）.attr（“class”）；
var输入=$（“#friendsNames”）；
input.val（input.val（）+peopleName+“”）；
$（“#检查按钮”）。切换（真）；
$（“#friendsNames”）。关于（'输入'，函数（事件）{
if（this.value.length==0）{
console.log（“Works！”）；
$（“#检查按钮”）。切换（假）；
console.log（“按钮不应显示”）；
}否则{
console.log（“应显示按钮”）；
$（“#检查按钮”）。切换（真）；
}
});
$（“#检查按钮”）。单击（函数（）{
var newParticipants=input.val（）；
发出（“addParticipantsToConversation”，newParticipants）；
$（“#chatToInfo”）.append（“，”，input.val（））；
$（“#friendsNames”）.val（“”）；
$（“：mobile pagecontainer”）.pagecontainer（“更改”，$（“#pagefour”），{transition:“slidedown”}）；
});   
});

如果你发布你现有的代码、html和其他相关内容来演示当前问题，这将比寻找我们无法重现的问题的替代解决方案更有帮助。你的权利@Fran，但问题是，可以添加到输入字段的项目是通过编程生成的，因此，这将是一个复杂的问题。但是我明白你的意思，问这样做是否更好？意味着你展示的代码是一个有效的解决方案，你只需要确认这是否是最好的方法。如果是这样的话，那么这个问题主要是基于观点的，因为它不试图解决问题：（没有看到实际的错误代码，很难给你一个非猜测的解决方案。无论如何，看起来你找到了一个方法：）我明白你的观点，只是我在我的问题中解释了代码目前不起作用。问题是

这样做会更好吗？

是关于我自己的解决方案，我不确定这个解决方案是否有效

#go {
  display: none;
}