入力フィールドに値があるかどうかによって、ボタンが表示/非表示になります

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

代わりにjQueryの代わりにshowとhideを使用します。私はあなたが入力が変化しているので、これが起こりたいと思うので、私はkeyup（onChangeまたはalternativesを使うことができます）でスローしました。マークアップ

少しあなたのコードを微調整...

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