单击链接时显示/隐藏元素（表单） - 通过 ajax 提交表单答案

【问题标题】：Show/Hide elements (form) on link click - Submit form via ajax单击链接时显示/隐藏元素（表单） - 通过 ajax 提交表单
【发布时间】：2018-08-14 12:38:10
【问题描述】：

我正在尝试使用 jquery 播种和隐藏表单。这是通过链接完成的...

我想隐藏带有data-action="edit" 的所有链接，但只显示链接旁边的表单，因为我在此站点上还有一些框。

我只想显示第一个框的形式（点击链接）

我还需要类 "box box-primary" 的 div 的 ID，其中 a (data-action="save") 是。

$(document).ready(function() {
  $('a[data-action=edit').on('click', function() {
    $('div .box-tools').addClass('hide');
    $(this).next('div .spinner').removeClass('hide');
    $(this).next('dl.view-data').addClass('hide');
    $(this).next('form.form-data').removeClass('hide');
  });

  $('a[data-action=cancel').on('click', function() {
    $('div .box-tools').removeClass('hide');
    $('div .spinner').first().addClass('hide');
    $('dl.view-data').first().removeClass('hide');
    $('form.form-data').first().addClass('hide');
  });

  $('a[data-action=save').on('click', function() {
    alert($(this).closest('form.form-data').serialize());
  });
});

.box.box-primary {
  border-top-color: #00acd6;
}

.box {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  border-top: 3px solid #dddddd;
}

.box {
  position: relative;
  background: #ffffff;
  border-top: 2px solid #c1c1c1;
  margin-bottom: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width: 100%;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.hide {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<div class="box box-primary" id="basic-info">
  <div class="box-header">
    <h3 class="box-title">Info</h3>
    <div class="box-tools block-action permanent pull-right">
      <a href="javascript:void(0)" class="btn btn-default" data-action="edit">
				EDIT
			</a>
    </div>
  </div>
  <div class="box-body">

    <div class="text-center">
      <div class="small spinner hide">
        <div>Loading…</div>
      </div>
    </div>

    <dl class="dl-horizontal view-data">
      <dt>Vorname</dt>
      <dd>Test</dd>
      <dt>Nachname</dt>
      <dd>Test</dd>
    </dl>
    <form class="form-horizontal form-data hide" role="form">
      <input type="hidden" name="_token" value="kY4Xjk1GcbLSVYVEwkpy92xeE9ugvPRftPfLVTZF">

      <div class="form-group">
        <label for="first_name" class="col-sm-3 control-label">Vorname</label>
        <div class="col-sm-8">
          <input type="text" value="Test" name="first_name" class="form-control" id="first_name" placeholder="Vorname">
        </div>
      </div>

      <div class="form-group">
        <label for="last_name" class="col-sm-3 control-label">Nachname</label>
        <div class="col-sm-8">
          <input type="text" value="Test" name="last_name" class="form-control" id="last_name" placeholder="Nachname">
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-3 col-sm-8">
          <a href="javascript:void(0)" class="btn btn-primary" data-action="save">Speichern</a>
          <a href="javascript:void(0)" class="btn btn-default" data-action="cancel">Zurück</a>
        </div>
      </div>
    </form>
  </div>
</div>

<div class="box box-primary" id="basic-info2">
  <div class="box-header">
    <h3 class="box-title">Info</h3>
    <div class="box-tools block-action permanent pull-right">
      <a href="javascript:void(0)" class="btn btn-default" data-action="edit">
				EDIT
			</a>
    </div>
  </div>
  <div class="box-body">

    <div class="text-center">
      <div class="small spinner hide">
        <div>Loading…</div>
      </div>
    </div>

    <dl class="dl-horizontal view-data">
      <dt>Vorname</dt>
      <dd>Test</dd>
      <dt>Nachname</dt>
      <dd>Test</dd>
    </dl>
    <form class="form-horizontal form-data hide" role="form">
      <input type="hidden" name="_token" value="kY4Xjk1GcbLSVYVEwkpy92xeE9ugvPRftPfLVTZF">

      <div class="form-group">
        <label for="first_name" class="col-sm-3 control-label">Vorname</label>
        <div class="col-sm-8">
          <input type="text" value="Test" name="first_name" class="form-control" id="first_name" placeholder="Vorname">
        </div>
      </div>

      <div class="form-group">
        <label for="last_name" class="col-sm-3 control-label">Nachname</label>
        <div class="col-sm-8">
          <input type="text" value="Test" name="last_name" class="form-control" id="last_name" placeholder="Nachname">
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-3 col-sm-8">
          <a href="javascript:void(0)" class="btn btn-primary" data-action="save">Speichern</a>
          <a href="javascript:void(0)" class="btn btn-default" data-action="cancel">Zurück</a>
        </div>
      </div>
    </form>
  </div>
</div>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您需要阅读 .next() 的工作原理，

但这是您的代码的一个工作示例：

$(document).ready(function() {
  $('a[data-action=edit').on('click', function() {
    $(this).closest(".box-primary").find('dl.view-data, .box-tools').addClass('hide');
    $(this).closest(".box-primary").find('.spinner, form.form-data').removeClass('hide');
  });

  $('a[data-action=cancel').on('click', function() {
    $(this).closest(".box-primary").find('.box-tools, dl.view-data').removeClass('hide');
    $(this).closest(".box-primary").find('.spinner, form.form-data').addClass('hide');
  });

  $('a[data-action=save').on('click', function() {
    alert($(this).closest('form.form-data').serialize());
  });
});

例如，您的edit 按钮没有$(this).next('div .spinner')，因为如果您查看您的html，您的a 没有任何兄弟姐妹，所以next() 不要在这里工作。

演示

$(document).ready(function() {
  $('a[data-action=edit').on('click', function() {
    $(this).closest(".box-primary").find('dl.view-data, .box-tools').addClass('hide');
    $(this).closest(".box-primary").find('.spinner, form.form-data').removeClass('hide');
  });

  $('a[data-action=cancel').on('click', function() {
    $(this).closest(".box-primary").find('.box-tools, dl.view-data').removeClass('hide');
    $(this).closest(".box-primary").find('.spinner, form.form-data').addClass('hide');
  });

  $('a[data-action=save').on('click', function() {
    alert($(this).closest('form.form-data').serialize());
  });
});

.box.box-primary {
  border-top-color: #00acd6;
}

.box {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  border-top: 3px solid #dddddd;
}

.box {
  position: relative;
  background: #ffffff;
  border-top: 2px solid #c1c1c1;
  margin-bottom: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width: 100%;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.hide {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<div class="box box-primary" id="basic-info">
  <div class="box-header">
    <h3 class="box-title">Info</h3>
    <div class="box-tools block-action permanent pull-right">
      <a href="javascript:void(0)" class="btn btn-default" data-action="edit">
				EDIT
			</a>
    </div>
  </div>
  <div class="box-body">

    <div class="text-center">
      <div class="small spinner hide">
        <div>Loading…</div>
      </div>
    </div>

    <dl class="dl-horizontal view-data">
      <dt>Vorname</dt>
      <dd>Test</dd>
      <dt>Nachname</dt>
      <dd>Test</dd>
    </dl>
    <form class="form-horizontal form-data hide" role="form">
      <input type="hidden" name="_token" value="kY4Xjk1GcbLSVYVEwkpy92xeE9ugvPRftPfLVTZF">

      <div class="form-group">
        <label for="first_name" class="col-sm-3 control-label">Vorname</label>
        <div class="col-sm-8">
          <input type="text" value="Test" name="first_name" class="form-control" id="first_name" placeholder="Vorname">
        </div>
      </div>

      <div class="form-group">
        <label for="last_name" class="col-sm-3 control-label">Nachname</label>
        <div class="col-sm-8">
          <input type="text" value="Test" name="last_name" class="form-control" id="last_name" placeholder="Nachname">
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-3 col-sm-8">
          <a href="javascript:void(0)" class="btn btn-primary" data-action="save">Speichern</a>
          <a href="javascript:void(0)" class="btn btn-default" data-action="cancel">Zurück</a>
        </div>
      </div>
    </form>
  </div>
</div>

<div class="box box-primary" id="basic-info2">
  <div class="box-header">
    <h3 class="box-title">Info</h3>
    <div class="box-tools block-action permanent pull-right">
      <a href="javascript:void(0)" class="btn btn-default" data-action="edit">
				EDIT
			</a>
    </div>
  </div>
  <div class="box-body">

    <div class="text-center">
      <div class="small spinner hide">
        <div>Loading…</div>
      </div>
    </div>

    <dl class="dl-horizontal view-data">
      <dt>Vorname</dt>
      <dd>Test</dd>
      <dt>Nachname</dt>
      <dd>Test</dd>
    </dl>
    <form class="form-horizontal form-data hide" role="form">
      <input type="hidden" name="_token" value="kY4Xjk1GcbLSVYVEwkpy92xeE9ugvPRftPfLVTZF">

      <div class="form-group">
        <label for="first_name" class="col-sm-3 control-label">Vorname</label>
        <div class="col-sm-8">
          <input type="text" value="Test" name="first_name" class="form-control" id="first_name" placeholder="Vorname">
        </div>
      </div>

      <div class="form-group">
        <label for="last_name" class="col-sm-3 control-label">Nachname</label>
        <div class="col-sm-8">
          <input type="text" value="Test" name="last_name" class="form-control" id="last_name" placeholder="Nachname">
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-3 col-sm-8">
          <a href="javascript:void(0)" class="btn btn-primary" data-action="save">Speichern</a>
          <a href="javascript:void(0)" class="btn btn-default" data-action="cancel">Zurück</a>
        </div>
      </div>
    </form>
  </div>
</div>

【讨论】：