javascript - 每个按钮一个 div block

Question

点击其中一个按钮，页面上会出现3个按钮，div block 应该出现在屏幕中间，当点击另一个按钮时，前一个 block 应该消失，另一个一个会出现在它的位置。

结果是做了一个 block ，但是有几个出现了问题:

$('input').click(function() {
  $('.box').stop(true).animate({
    'top': '100px'
  }, 500);
});
$('#close').click(function() {
  $('.box').stop(true).animate({
    'top': '-100%'
  }, 500);
});

.box {
  display: block;
  position: absolute;
  top: -100%;
  left: 50%;
  margin-left: -200px;
  color: azure;
  background: rgba(127, 121, 121, 0.5);
  width: 400px;
  height: 200px;
  text-align: center;
}

.box p {
  line-height: 200px;
}

#close {
  float: right;
  cursor: pointer;
  font-size: 30px;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <span id="close">X</span>
  <p>Содержание блока</p>
</div>
<input type="button" value="Показать окошко">

Answer 1

试试这个。每个框都有一个 id 并且每个按钮都有一个 data-target 必须是目标框，然后使用它们来显示和隐藏框。

$('input').click(function($event) {
  $('.box').stop(true).animate({
    'top': '-100%'
  }, 500);
  $('#' + $event.target.getAttribute('data-target')).stop(true).animate({
    'top': '100px'
  }, 500);
});
$('.close').click(function($event) {
  $('#' + $event.target.getAttribute('data-target')).stop(true).animate({
    'top': '-100%'
  }, 500);
});

.box {
  display: block;
  position: absolute;
  top: -100%;
  left: 50%;
  margin-left: -200px;
  color: azure;
  background: rgba(127, 121, 121, 0.5);
  width: 400px;
  height: 200px;
  text-align: center;
}

.box p {
  line-height: 200px;
}

.close {
  float: right;
  cursor: pointer;
  font-size: 30px;
  color: red;
}

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<div class="box" id="one">
  <span data-target="one" class="close">X</span>
  <p>Содержание блока 1</p>
</div>
<input data-target="one" type="button" value="1">

<div class="box" id="two">
  <span data-target="two" class="close">X</span>
  <p>Содержание блока 2</p>
</div>
<input data-target="two" type="button" value="2">

<div class="box" id="three">
  <span data-target="three" class="close">X</span>
  <p>Содержание блока 3</p>
</div>
<input data-target="three" type="button" value="3">

如果您仍然遇到问题，请告诉我。

希望这有帮助:)