Jquery隐藏/显示不起作用

Jquery Hide/show not working

本文关键字：不起作用 显示 隐藏 Jquery      更新时间：2023-11-11

我只是在学习Jquery，我想知道是否有人能告诉我我的脚本出了什么问题。当用户在表单上点击submit时，我希望打开两个两个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>

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在DOM elements之前是written，则使用类似于的$(function(){...})

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

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

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

CSS

#mydivhide1, #mydivhide2{ display: none; }

HTML

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

小提琴由于某种原因出现了错误，但你明白了吗？

您可以这样做，请在语法末尾使用分号。

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

它应该是

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

应该是：

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

你有一个打字错误：

<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/

相关文章：