如何在jQuery中切换

我想单击一个按钮（或者在下面的示例中，单击一个链接）并在两个内容块之间切换，从显示内容到编辑内容

我有以下代码：

<style type="text/css">
    div.show {display:block;}
    input.hide {display:none;}
</style>

<a href="#">edit</a> <!--not sure what my jquery should look like to do toggling-->
<div class="show" id="d-01-on">Some content</div>
<input class="hide" id="d-01-off" name="d-01" value="Some content" />

div.show{display:block；}
input.hide{display:none；}
一些内容

谢谢你的帮助

---

[请参阅此技术的扩展]

使用jquery显示和隐藏元素的步骤如下：

HTML:

<div id="d-01">content</div>

---

这将切换两个元素的可见性：

function handleClick() {
  $('div.show').toggle();
  $('input.hide').toggle();
}

---

当然，你的类名是错的。您可以使用IDs。

使用jQuery很容易，只需添加以下JS代码：

$(document).ready(function(){
   $('#button').on('click', function() {
        $('#d-01-on').toggle();
        $('#d-01-off').toggle();
   });
})

---

它将与您当前的标记和css代码一起工作。

此外，要从超链接触发此操作，请将jquery代码包装在函数定义中，然后为您的标记提供一个onclick属性，并将函数名称作为其参数。很酷，谢谢@mr_lewjam…现在尝试一下。我一会儿就回来。谢谢@mr_lewjam。我一直在研究这个问题，直到我看到下面斯卡托的建议。然后我试了一下，很快就成功了。因此，我将以斯卡托为答案，但我真的非常感谢你的建议，我相信我可以更努力地让它发挥作用。谢谢你的建议@ChrisMiller。我将在下面介绍Skatox，因为它运行得非常快。非常好@Skatox。工作完美。谢谢如果你有时间@Skatox，你能看看我的后续问题吗？谢谢

$(document).ready(function(){
   $('#button').on('click', function() {
        $('#d-01-on').toggle();
        $('#d-01-off').toggle();
   });
})