javascript - CM 表单，jQuery + $(this)。适用于页面上的所有类

Question

我正在我正在构建的网站上使用营销事件表单。有多种形式遵循相同的结构(见下文)并使用相同的类名。

我使用 AJAX 将表单发布到 Campaign Monitor，如果返回错误消息，还添加类，如果正确则显示另一条消息。这工作正常，但是它将错误类应用于该页面上的所有表单。由于设计的性质，主页上最多可以有 4 个。

如果提交成功，则会显示响应，如果不成功，则会显示应用于输入的类或错误(仅红色边框)。我以前做过类似的事情，但今天无法解决。

问题是响应或错误将显示在当前页面上的所有表单上，直到刷新网站

        <form action="http://thesocialmediacollege.createsend.com/t/t/s/digdk/" method="post" class="cm-form">
            <input class="input-white" id="fieldName" name="cm-name" type="text" placeholder="First Name" required="" />
            <input class="input-white" id="fieldtrdllu" name="cm-f-trdllu" type="text" placeholder="Last Name" required="" />
            <input class="input-white email-input" id="fieldEmail" name="cm-divur-divur" type="email" placeholder="Email" required />
            <button class="input-btn btn-blue" type="submit" id="submit">Submit</button>
            <h3 class="ash form-alert response">Thanks! We will be in touch.</h3>
        </form>

$('.cm-form').submit(function (e) {
    e.preventDefault();
    $.getJSON(
        this.action + "?callback=?",
        $(this).serialize(),
        function (data) {
            if (data.Status === 400) {
                $(this).find(".email-input").addClass("error");
            } else { // 200
               $(this).find(".response").show();
            }
        });
    });
});

Answer 1

我打赌错误来自$( this )，尝试缓存它:

$('.cm-form').submit(function (e) {

    var $this = $(this);

    e.preventDefault();
    $.getJSON(
        $this.attr('action') + "?callback=?",
        $this.serialize(),
        function (data) {
            if (data.Status === 400) {
                $(".email-input", $this).addClass("error");
            } else { // 200
               $(".response", $this).show();
            }
        });
    });
});