Question

我正在学习JS / jQuery，主要是为了在我的WordPress项目中实现AJAX。经过数小时的头痛试图弄清楚这段代码有什么问题，我决定把它发布在这里，希望有人能帮助我。

我的联系表单JS脚本未按预期工作。我无法弄清楚为什么在点击提交按钮后，所需字段的css规则在页面上不会改变。

jQuery脚本：

jQuery( document ).ready( function( $ ) {

    if ( $( '#mystcf-send' ).length > 0 ) {

        alert( 'Everything OK' ); // We enter in the condition... as expected.

        $( 'body' ).append( '<div id="noty"></div>' );

        $( '#mystcf-send' ).click( function() {
            var busy  = false,
                    error = false,
                    form  = $( this ).parent( 'form' );

            alert( 'Everything OK' ); // After click on '#mystcf-send' button, the alert box popin, the code is excecuting normally untill here...

            form.find( '[required]' ).each( function() {

                alert(); // After click on #mystcf button, this alert box is NOT displaying... and so the conditions below are not working.

                if( $.trim( $( this ).val() ) == '' ) {
                    $( this ).css( 'border-color', '#FF0000' );
                    error = true;
                }
                else {
                    $( this ).css( 'border-color', '#CDCDCD' );
                }

            } );
            return false;
        } );
    }
} );

PHP脚本：

<?php

if ( ! defined( 'ABSPATH' ) ) exit;

add_shortcode( 'mystcf', 'mystcf_shortcode' );

add_action( 'wp_enqueue_scripts', 'mystcf_scripts' );

function mystcf_scripts() {
    if ( is_page( 'contact' ) ) :
        wp_register_script( 'mystcf-script', get_stylesheet_directory_uri() . '/inc/contact-form/js/jquery-contact-form.js', array( 'jquery' ) );
        wp_localize_script( 'mystcf-script', 'mystcf_ajax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
        wp_enqueue_script( 'mystcf-script' );
    endif;
}

function mystcf_shortcode() {
    ob_start();
    mystcf_template();
    $contact_form = ob_get_clean();
    return $contact_form;
}

function mystcf_template() { ?>
    <div class="mystcf-container">
        <form id="mystcf">
            <div class="mystcf-left-panel">
                <p>
                    <label for="mystcf-email">Email <abbr class="required" title="<?php esc_attr( __( 'Required', 'mystorefront' ) ); ?>">*</abbr></label><br />
                    <input type="email" id="mystcf-email" name="mystcf_email" value="<?php if ( isset( $_POST['mystcf_email'] ) ) echo  esc_attr( $_POST['mystcf_email'] ); ?>" required />
                </p>
                <p>
                    <label for="mystcf-first-name">Prénom</label><br />
                    <input type="text" id="mystcf-first-name" name="mystcf_first_name" value="<?php if ( isset( $_POST['mystcf_first_name'] ) ) echo esc_attr( $_POST['mystcf_first_name'] ); ?>" />
                </p>
                <p>
                    <label for="mystcf-second-name">Nom</label><br />
                    <input type="text" id="mystcf-second-name" name="mystcf_second_name" value="<?php if ( isset( $_POST['mystcf_second_name'] ) ) echo esc_attr( $_POST['mystcf_second_name'] ); ?>" />
                </p>
                <p>
                    <label for="mystcf-tel">Téléphone</label><br />
                    <input type="tel" id="mystcf-tel" name="mystcf_tel" value="<?php if ( isset( $_POST['mystcf_tel'] ) ) echo esc_attr( $_POST['mystcf_tel'] ); ?>" />
                </p>
            </div>
            <div class="mystcf-right-panel">
                <p>
                    <label for="mystcf-message">Message <abbr class="required" title="<?php esc_attr( __( 'Required', 'mystorefront' ) ); ?>">*</abbr></label><br />
                    <textarea type="text" id="mystcf-message" name="mystcf_message" rows="17" required><?php if ( isset( $_POST['mystcf_message'] ) ) echo esc_textarea( $_POST['mystcf_message'] ); ?></textarea>
                </p>
            </div>
            <?php wp_nonce_field( '', 'security' ); ?>
            <input type="hidden" name="mystcf_sent" value="1">
            <p>
                <input type="submit" class="mystcf-send" id="mystcf-send" value="<?php esc_attr( __( 'Send', 'mystorefront' ) ); ?>">
            </p>
        </form>
    </div><?php
}

Answer 1

问题在于搜索表单的行。它应该是这样的：

form = $(this).closest('form');

parent()返回父级（仅当它与指定的选择器匹配时）。另一方面，closest()搜索所有祖先并返回第一个匹配。

jQuery未知问题与字段样式

1 个答案: