Question

我有一个包含多个具有相同名称（full-width）的div的表单。他们都处于同一水平。其中一个是隐藏的（带有hide类）。我想要的是，如果我选择提交，它不应该提交，首先隐藏隐藏div的所有兄弟div（在本例中为full-width）并取消隐藏具有类hide的那个。

现在当我再次按下时，它应该只提交表格。

JSFiddle在这里： - http://jsfiddle.net/xmqvx/2/

Answer 1

您的代码有几个问题：

您使用event.preventDefault但event已e - e.preventDefault
您的ID选择器定位了一个不存在的ID（更改为#submit-this）

工作代码：

$("#submit-this").click(function (e) {
    e.preventDefault();
    if ($(".full-width").hasClass("hide")) {
        $(".full-width").hide();
        $(".full-width.hide").removeClass("hide").show();
    } else {
        alert("Submitting");
        $("#this-form").submit();
    }
});

http://jsfiddle.net/xmqvx/4/

Answer 2

你也可以利用像这样的JavaScript闭包，以避免你的行为依赖于你的UI：

$(document).ready(function () {
    var alreadyClicked = false;
    $("#submit-this").click(function (e) {
        e.preventDefault();
        if (alreadyClicked) {
            $('#this-form').submit();
        } else {
            $('.full-width').hide();
            $('.hide').show();
            alreadyClicked = true;
        }
    });
});

首先显示Div，然后在表单中第二次单击按钮时提交

2 个答案: