jQuery隐藏和显示表单

Question

我已经创建了一个链接，点击后会弹出并显示一个“联系表格”。它可以正常打开、验证、提交和发送电子邮件。但是当我试图关闭这个表单时遇到了问题。

HTML

<div id="blanket"><div id="myForm">
    <p style="text-align:right; margin: 0; padding: 0;"><a href="#" id="close" onClick="onClickClose();">Close</a></p>
    <table width="400" border="0" cellspacing="0" cellpadding="5"><tr><td>
    <form name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
    <input name="fieldnm_1" type="radio" value="M." /> M. 
    <input name="fieldnm_1" type="radio" value="Mme" /> Mme. 
</td></tr><tr><td width="400">
    <input name="fieldnm_2" type="text" id="left_form" placeholder="Pr&eacute;nom *" tabindex="1"/><input name="fieldnm_4" type="text" id="right_form" placeholder="Courriel *" tabindex="3"/>
</td></tr><tr><td width="400">
    <input name="fieldnm_3" type="text" id="left_form" placeholder="Nom *" tabindex="2"/>
    <input name="fieldnm_5" type="text" id="right_form" placeholder="T&eacute;l&eacute;phone *" tabindex="4"/>
</td></tr><tr><td width="400">
    <select name="fieldnm_7" id="left_list" >
    <option value="">Nombre de chambres *</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
    <select name="fieldnm_8" id="right_list">
    <option value="">Nombre de pieds carr&eacute;s</option>
    <option value="600-800">600-800</option>
    <option value="800-1000">800-1000</option>
    <option value="1000-1250">1000-1250</option>
    <option value="Plus de 1250">Plus de 1250</option>
    </select>
</td></tr><tr><td>
    <textarea name="fieldnm_9" id="comment" placeholder="Commentaire*" tabindex="5"></textarea>
</td></tr><tr><td>
    <input type="submit" name="Submit" value="Soumettre" tabindex="6">
<input type="reset" name="Submit2" value="Reset">
</td></tr></table></form></div>
</div>

JS

<script type="text/javascript">
onClickRegister = function(){
    b = $("#blanket");
    b.css("display","block");
    b.css("position","fixed");
    b.css("width", window.innerWidth);
    b.css("height", window.innerHeight);
    b.css("background-color", "rgba(0, 0, 0, 0.7)");
    f=$("#myForm");
    f.css("position", "fixed");
    f.css("top", "33%");
    f.css("left", "33%");
}
window.onResize(function(){
    if($("#blanket").length>0){
        b.css("width", window.innerWidth);
        b.css("height", window.innerHeight);
    }
});
onClickClose = function(){
    $("#blanket").css("display","none");
}
</script>

我尝试甚至只是在 onClickClose 中添加一个警报，但没有任何反应。

- Black Bird

---

使用浏览器控制台查找并修复抛出的错误。 - charlietfl

当我点击关闭按钮时，控制台显示：onClickClose未定义。所以我猜测它找不到该函数。 - VVV

Answer 1

你可以使用：

function onClickClose(){
    $("#blanket").hide();
}

*如果你不想让 jQuery 在其缓存中保存用于以后还原的 display 属性值（如此处所述），你可以只使用：

function onClickClose(){
    $("#blanket").css("display","none");
}

- PbxMan

---

当然，使用 .hide() 会更好。 - mk_89

正如第一条评论建议的那样，您应该执行$("#blanket").hide();，并且由于您正在使用jQuery，因此应该使用其他答案中提供的方法编写单击处理程序并从HTML中删除onclick。 - Huangism

我更喜欢这种写法的函数。也许你需要一个变量？var myfunc = function () {} - Todd Horst

Answer 2

$("#close").click(function() {
 $("#blanket").hide();
});

- Todd Horst

Answer 3

实际上，你的问题不在于 onClickClose，而是在它之前直接调用了 window.onResize()。应该改为 window.onresize，不要使用驼峰式命名，并且它不是一个函数而是一个事件处理器。你应该在那里放置以下代码：

window.onresize = function () {
    if ($("#blanket").length > 0) {
        b.css("width", window.innerWidth);
        b.css("height", window.innerHeight);
    }
};

你之前的写法导致了一个错误，因此 onClickClose 函数没有被解析。在 MDN 上可以阅读有关此问题的所有内容。

PbxMan 的答案之所以有效，是因为它利用了变量提升。通过将其从函数表达式更改为函数声明，该函数会被提升到作用域的顶部，并且在出现错误之前得到解析。因此，虽然它可以工作，但实际上是绕过了真正的问题。

Angus Croll 在函数声明与函数表达式和变量提升方面有一篇很好的文章。

- ultranaut

---

实际上，在这种情况下，myFunction = function() { }和function myFunction() { }之间没有区别，它们都应该起作用。但由于onResize中的错误忽略了将函数设置为变量，而另一种编写方式则不那么脆弱。 - Jan

在这种情况下，使用JavaScript的var functionName = function(){}和function functionName(){}应该没有区别。 - Jan

在这种情况下，由于变量提升，实际上会有所不同，请参见我回答中的补充说明。 - ultranaut

我的意思是“如果你修复了破坏你代码的错误，那么它对你的代码不应该有任何影响”。修复onresize的错误，两种声明函数的方式都可以正常工作。 - Jan

是的，我明白了 ;) 这只是一个有趣的现实案例，展示了这两者之间差异的不立即显现的后果。 - ultranaut

Answer 4

$('#close').click(
function(abc){
    $("#blanket").css("display","none");
abc.preventDefault(); // this will cancel the default action for href
}

- Catalin Sterian

---

未捕获的语法错误：参数列表后缺少 )
只需在 } 后添加 ) 即可 - Rehb