jquery - 如何在 jQuery 中切换

Question

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

我有以下代码片段：

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

感谢您的帮助。

[请参阅如何简化和压缩重复的 jQuery 代码以扩展此技术]

Answer 1

使用 jquery 显示和隐藏元素的方法如下：

HTML：

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

Javascript：

$.("#d-01").toggle(); //toggles display so if shown then hides, if hidden then shows;
$.("#d-01").show();  //shows div
$.("#d-01").hide();  //hides div

Answer 2

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

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

那么你的班级名称当然会是错误的。您可以改用 ID。

Answer 3

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

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

它将适用于您当前的标记和 css 代码。