javascript - 隐藏/显示多个按钮，除非相关字段已完成

Question

我目前正在开发一个允许用户填写表单的网站。目前有 3 个文本输入可将用户名添加到社交媒体按钮。如果留空，则按钮不应出现在该特定字段上，如果完成，则按钮将显示在用户帖子上，我无法使其正常工作，仅使用一个字段和一个按钮时它可以工作，但我需要这个拖车超过多个，我不确定关于如何实现这一目标。

////////////HTML///////////

<form>
  <div class="form-group">
    <input type="text" class="form-control twitter-button" placeholder="Text input">
  </div>
  <div class="form-group">
    <input type="text" class="form-control github-button" placeholder="Text input">
  </div>
  <div class="form-group">
    <input type="text" class="form-control facebook-button" placeholder="Text input">
  </div>
</form>


<a class="btn btn-git" href="#" role="button">git button</a>
<a class="btn btn-fb" href="#" role="button">fb button</a>
<a class="btn btn-twitter" href="#" role="button">twitter button</a>

//////CSS///////////

.btn.btn-twitter {
 display: none;   
}

////////JS///////////

    $(".twitter-button, .github-button, .facebook-button").keyup(function () {
   if ($(this).val()) {
      $(".btn.btn-default").show();
   }
   else {
      $(".btn.btn-default").hide();
   }

Answer 1

试试closest()函数和 trim() 将有助于删除不需要的空间

$(".form-control").keyup(function() {
  if ($(this).val().trim()) {
    $(this).closest('.form-group').find(".btn.btn-default").show();
  } else {
     $(this).closest('.form-group').find(".btn.btn-default").hide();
  }
})

.btn.btn-default {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form>
  <div class="form-group">
    <input type="text" class="form-control twitter-button" placeholder="Text input">
     <button class="btn btn-default">default</button>
  </div>
  <div class="form-group">
    <input type="text" class="form-control github-button" placeholder="Text input">
     <button class="btn btn-default">default</button>
  </div>
  <div class="form-group">
    <input type="text" class="form-control facebook-button" placeholder="Text input">
     <button class="btn btn-default">default</button>
  </div>
 
</form>