php - Jquery 在 php echo 中显示隐藏的 Div

Question

我在这里苦苦挣扎..需要一些帮助!! :)

我有一个 PHP 并且需要在按下提交按钮时在回显中运行 jquery .show。任何帮助将不胜感激。

PHP

<?php
                        $name = $_POST['name'];
                        $email = $_POST['email'];
                        $title = $_POST['title'];
                        $content = $_POST['content'];
                        $from = 'From: Comeone Form'; 
                        $to = 'info@someemail.com'; 
                        $subject = 'Contact Form';
                        $human = $_POST['human'];

                        $body = "From: $name\n E-Mail: $email\n Subject: $title\n Message:\n $content";

                    if ($_POST['submit'] && $human == '4') {                 
                    if (mail ($to, $subject, $body, $from)) { 
                            echo '<p>Your email has been successfully sent!</p>';
                    } else { 
                            echo '<p>Something went wrong, go back and try again!</p>'; 
                            } 
                    } else if ($_POST['submit'] && $human != '4') {
                            echo '<script>
$("submit-mail").click(function () {
$("#mail-message-window").show("slow");
});
</script>';
                            }
                    ?>

表格>

<form method="post" action="#contact-us">
                        <label>Name *</label>
                        <input type="text" name="name" class="rounded" required />
                        <label>E-mail *</label>
                        <input type="email" name="email" class="rounded" required />
                        <label>Subject *</label>
                        <input type="text" name="title" class="rounded" required />
                        <label>Message *</label>
                        <textarea name="content" cols="42" rows="7" class="rounded" required></textarea>
                        <label>What is 2+2? (Anti-spam) *</label>
                        <input type="text" name="human" class="rounded" required />
                        <input id="submit" name="submit" id="submit-mail" type="submit" class="submit-btn rounded" value="SEND">
                    </form>

隐藏的DIV >

<div id="mail-message">
                        <table>
                            <tr>
                                <td>
                                    <div id="mail-message-window">
                                        <div id="mail-message-header"></div>
                                        <p id="mail-failure">Unable to send your email!</p>
                                        <p id="invalid-email">Please enter valid email address!</p>
                                        <p id="empty-field">Please fill out all the fields in order to send us a message.</p>
                                        <p id="mail-success">Your email has been successfully sent to us!</p>
                                        <input type="button" id="mail-message-btn" class="mail-message-btn rounded" value="OK" />
                                    </div>
                                </td>
                            </tr>
                        </table>

CSS >

#mail-message
{
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    z-index: 210;
}
#mail-message
{
    width: 100%;
    height: 100%;
    text-align: center;
}
#mail-message-window
{
    width: 400px;
    padding-bottom: 20px;
    border: solid 0px #ffffff;
    background: #000000 url('../images/bg.png') repeat top left;
    margin: 0 auto;
}
#mail-message-header
{
    width: 400px;
    height: 70px;
}
.mail-message-success
{
    background: transparent url('../images/success.png') no-repeat top left;
}
.mail-message-error
{
    background: transparent url('../images/error.png') no-repeat top left;
}
#mail-message-window p
{
    margin: 0 0 5px 10px;
    text-align: left;
}
#mail-message-window input
{
    margin-top: 10px;
}
#mail-message td
{
    vertical-align: middle;
}

Answer 1

代替

$("#mail-message-window").show("slow");

你需要

$("#mail-message").show("slow");

因为 CSS 似乎 display: none; 设置为 #mail-message 而不是 mail-message-窗口。

如果你想使用 $("#mail-message-window").show("slow"); 然后将 display:none 设置为 #mail-message-window 而不是 #mail-message。

注意事项

你应该使用$(document).ready(function() { ... })，简而言之$(function() { .. })包装所有 jQuery 代码。