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

Question

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

有谁知道我如何做到这一点？

<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();

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

Answer 2

您可以使用$(".classname").css("property","value"); 例如：$(".email-success").css("display","block");

这是更通用的解决方案，因为您可以更改任何您想要的属性，而不仅仅是显示