Question

我目前正在开发一个允许用户填写表单的网站。目前有3个文本输入用于向社交媒体按钮添加用户名。如果留空则该按钮不应该出现在该特定字段中，如果完成，那么按钮将显示在用户发布时无法使其工作它只使用一个字段＆amp;一个按钮，但我需要这个牵引多个，我不确定如何实现这一点。

///////////// 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>

Answer 2

检查更改中的所有字段：

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>

＆＃13;

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

2 个答案: