javascript - 如何在 addClass() 之后更改类的属性

Question

我有一个发送电子邮件的表单。我将数据发送到 AJAX，然后发送到 php 文件。当数据成功发送时，我的 ajax 中有一个成功函数。如果数据发送成功，我希望表单显示为 display: none;(我已完成)并显示一个新类。我知道这可以通过 addClass() 方法来完成。但是，我不明白如何做到这一点。原因是我创建了一个带有成功消息的简单 div，所以在页面加载时我隐藏了那个 div。所以，我的想法是删除 email-success 的类，因为我将它设置为 display: none; 然后添加其子 div 的类电子邮件成功容器。这是行不通的。

有谁知道我怎样才能做到这一点？

<div class="white-green">
  <!-- The success div when the email is successfully sent .. I want this to show after email sends-->
  <div class="email-success">
    <div class="email-success-container">
      <div id="email-success-title">THANK YOU FOR CONTACTING OUR AGENCY!</div>
      <div id="email-success-description">Your submission has been received and one of our team members will contact you shortly.</div>
    </div>
  </div>
  <div class="project-container">
        <div class="project-input-container">
  <!-- Form for email.... it shows on page load-->
  <form action="" autocomplete="on" method="POST" id="project-information-form">
    <input type="text" class="input-borderless" id="project-name" placeholder="Your Name">
    <input type="text" class="input-borderless" id="title-roll" placeholder="Title/Role">
    <input type="email" class="input-borderless" id="project-email" placeholder="Email Address">
    <input type="text" class="input-borderless" id="project-number" placeholder="Phone Number">
    <input type="text" class="input-borderless" id="project-company" placeholder="Company/URL">
</div>
<div class="project-input-container2">
  <textarea rows="3" class="input-borderless" id="project-description" placeholder="Describe the project"></textarea>
  <input type="text" class="input-borderless" id="project-source" placeholder="How did you hear about us?">
  <input type="text" class="input-borderless" id="project-socialMedia" placeholder="Which of our social media influenced you the most?">
  <input type="text" class="input-borderless" id="project-humanTest" placeholder="Human Test: What day comess after Thursday?">
</div>
<input type="submit" id="submit-project" value="Send Project Inquiry">
</form>
</div>

我的 ajax 成功:

success: function (data) {
    //console.log(data); // data object will return the response when status code is 200
    if (data == "Error!") {
        alert("Unable to send email!");
        alert(data);
    } else {
        $(".project-container").addClass("removeClass");
        $(".white-green").addClass("email-success-container");
        $(".white-green").removeClass("email-success");
        $(".announcement_success").fadeIn();
        $(".announcement_success").show();
        $('.announcement_success').html('Email Successfully sent!');
        $('.announcement_success').delay(5000).fadeOut(400);
    }
},

我试图在电子邮件发送后显示的 div 的 CSS:

.removeClass {
    display: none;
}
.email-success {
    display: none;
}
.email-success-container {
    margin-left: 9%;
    margin-top: 250px;
}
#email-success-title {
    color: #ba5a45;
    font-size: 3em;
}
#email-success-description {
    color: #ba5a45;
    font-size: 2em;
}

有谁知道我可以做些什么来实现这一点？

Answer 1

您可以使用 .show() 和 .hide() 覆盖 display: none; CSS。

$(".email-success").show();

这使用内联样式属性，它优先于样式表。