Question

我刚刚学习Jquery，我想知道是否有人可以告诉我我的脚本有什么问题。当用户点击表单上的提交时，我想要打开2个两个div标签，并且要包含要关闭的表单。

谢谢！

这是脚本

<script>
    $('#form_container').submit(function()
    {
        $('#form_container').hide()
        $('#mydivhide1, #mydivhide2').show()
    });
</script>

这些是div和形式

<div id="mydivhide1" style="visibility:hidden">1111</div>
<div id="mydivhide2" style="visibility:hidden">2222</div>

<div id="form_container">
    <form id="form_710370"  method="post" convert.php">
        <input id="Website" name="url1" type="text" value=""/> 
        <input id="saveForm" type="submit" name="submit" value="submit" />
    </form> 
</div>

Answer 1

Submit您的form而非div赞，

$('#form_710370').submit(function(){
   $('#form_container').hide()
   $('#mydivhide1, #mydivhide2').show();
   return false;
});

hide div's使用display:none而不是visibility:hidden赞，

<div id="mydivhide1" style="display:none">1111</div>
<div id="mydivhide2" style="display:none">2222</div>

已更新，如果您的script在written DOM elements之前$(function(){...})，那么请使用$(function(){ $('#form_710370').submit(function(e){ e.preventDefault(); // add this $('#form_container').hide() $('#mydivhide1, #mydivhide2').show(); return false; }); });，

{{1}}

Answer 2

它应该是：

$('#form_710370').submit(function()
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
})

Answer 3

这是一个小提琴：http://jsfiddle.net/cdJU9/1/

我添加了CSS以隐藏顶级div，我认为隐藏的内联可见性样式覆盖了JS。

CSS

#mydivhide1, #mydivhide2{ display: none; }

HTML

<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>

由于某些原因，小提琴会抛出一个错误，但你明白了吗？

Answer 4

你可以这样做，请最后用分号集中你的语法。

<script>

    $('#saveForm').click(function(){
        $(this).parent().hide();
        $('#mydivhide1, #mydivhide2').show();
       });

</script>

Answer 5

应该是

<script>
$('#form_710370').submit(function()
{
    $('#form_container').hide()
    $('#mydivhide1, #mydivhide2').show()
    });

</script>

Answer 6

你那里有一个错字：

<form id="form_710370"  method="post" convert.php">

应该是

<form id="form_710370"  method="post" action="convert.php">

对于JS：

 $('#form_710370').submit(function() {
     $('#form_container').hide();
     $('#mydivhide1, #mydivhide2').show();
 })

编辑：http://jsfiddle.net/GZEmw/

Jquery隐藏/显示无法正常工作

6 个答案: