Question

现在，按钮显示何时将输入添加到输入字段，但如果我删除了输入，则按钮不会隐藏。

我唯一的解决方案是将功能划分为2个单独的功能。也就是说，在点击时将输入添加到输入字段，然后是另一个跟踪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"
    });
  });
});

Answer 1

或许可以使用show和hide from 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>

还有某种基本风格......

#go {
  display: none;
}

诀窍？

Answer 2

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

$("#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 + "");  
          $("#checkButton").toggle(true);
          $("#friendsNames").on('input', function(event) {
          if (this.value.length === 0) {
            console.log("Works!");
            $("#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" });
            });   
        });

应该显示/隐藏按钮，具体取决于输入字段中是否有值

2 个答案: