javascript - 我的警报有问题，第一个警报正常关闭，但其他警报没有关闭

Question

我正在为我的网站创建一个警报系统，服务器应该返回多个警报，但我不知道如何使关闭按钮适用于每个警报，我的代码，只有第一个警报关闭但其他警报什么也没做。谁能帮我？

<div id="alert" class="info showAlert">
    <div id="content">
      <i class="fas fa-exclamation-circle"></i>
      <p>Warning: This is a warning alert!</p>
    </div>
    <button id="close">x</button>
  </div>

$('#close').click(function(){
    $("#alert").removeClass("showAlert");
  $("#alert").addClass("hideAlert");
  setTimeout(() => {
    $("#alert").remove()
  }, 500);
});

https://jsfiddle.net/joaopcos/em8aLbdh/27/

标签： javascripthtmlcss

Answer 1

在HTML, ids 需要是唯一的。虽然有很多原因，但您遇到的问题源于您jQuery试图定位一个id重复多次的唯一性（在您的 jsfiddle 示例中）。相反，将您id的 s 转换为类，并将最接近的警报定位到单击的关闭按钮。

$(".close").click(function() {
  const thisAlert = $(this).closest(".alert");

  thisAlert
    .removeClass("showAlert")
    .addClass("hideAlert");
  setTimeout(() => {
    thisAlert.remove()
  }, 500);
});

@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,400;0,500;1,700&display=swap');
#alert-container {
  position: fixed;
  top: 84px;
  right: 12px;
}

.alert {
  display: flex;
  max-width: 540px;
  margin-left: 12px;
  margin-bottom: 10px;
  border-radius: 5px;
  padding: 0 12px 0 12px;
}

.alert.showAlert {
  animation: showAlert 500ms ease forwards;
}

@keyframes showAlert {
  0% {
    transform: translateX(110%);
  }
  100% {
    transform: translateX(0%);
  }
}

.alert.hideAlert {
  animation: hideAlert 500ms ease forwards;
}

@keyframes hideAlert {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(110%);
  }
}

.content {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
}

.content>svg {
  width: 32px;
  height: 32px;
  margin-right: 16px;
}

.close {
  position: relative;
  left: 12px;
  border-radius: 0 5px 5px 0;
  border: none;
  cursor: pointer;
}

.close>svg {
  width: 24px;
  height: 24px;
  margin: 0 12px 0 12px;
}

.error {
  background-color: #FFE1E3;
  border-left: 8px solid #FF465D;
  color: #FF4553;
}

.error>button {
  background-color: #FFB9BE;
  color: #FF4553;
}

.info {
  background-color: #D6F0FD;
  border-left: 8px solid #71C7F8;
  color: #3DB6FF;
}

.info>button {
  background-color: #A8DDFD;
  color: #3DB6FF;
}

.success {
  background-color: #C5F3D7;
  border-left: 8px solid #2AD56F;
  color: #20AF5D;
}

.success>button {
  background-color: #94EAB9;
  color: #20AF5D;
}

.warning {
  background-color: #FFEAC5;
  border-left: 8px solid #FFC04C;
  color: #F19B00;
}

.warning>button {
  background-color: #FFDCA1;
  color: #F19B00;
}

@media only screen and (max-width: 540px) {
  .content {
    font-size: 16px;
  }
  .content>svg {
    width: 24px;
    height: 24px;
  }
  .close>svg {
    width: 18px;
    height: 18px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="alert-container">
  <div class="alert info showAlert">
    <div class="content">
      <i class="fas fa-exclamation-circle"></i>
      <p>Warning: This is a warning alert!</p>
    </div>
    <button class="close">x</button>
  </div>
  <div class="alert info showAlert">
    <div class="content">
      <i class="fas fa-exclamation-circle"></i>
      <p>Warning: This is a warning alert!</p>
    </div>
    <button class="close">x</button>
  </div>
  <div class="alert info showAlert">
    <div class="content">
      <i class="fas fa-exclamation-circle"></i>
      <p>Warning: This is a warning alert!</p>
    </div>
    <button class="close">x</button>
  </div>
</div>

jsFiddle