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

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

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

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

Answer 2

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

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

如何改变课程＆＃39; addClass（）之后的属性

2 个答案: