jquery - 一次显示隐藏 5 个 div

Question

我不久前找到了这段代码，不幸的是我找不到原作者是谁（不管是谁，谢谢）......

http://jsbin.com/amituh/11/

这太棒了，但我怎样才能做到这一点，所以还有另一个按钮可以少显示 3 个 div（但总是至少显示 3 个 div）。如何让它显示所有的div？

感谢大家

Answer 1

快速说明一下，如果您使用的是 Chrome（Firefox 也这样做，我只是不太熟悉），您可以右键单击并检查元素，以查看页面的源代码，并且资源选项卡提供您也可以访问任何外部脚本。学习新技术真的很方便！

无论如何，关于你的问题，

要删除三行，有几种方法。这是我会采取的路线，但请记住，还有其他方法，可能甚至更好。

您作为示例提供的脚本以所有已创建的行开头，只是隐藏了。您可以在 jQuery 中使用 append/remove 来获得相同的效果而没有限制。

这是我为它编写的函数，它们可以包含在头部的脚本标签中：

window.linecount = 0;
function add3lines()
{
     $('body').append("<div id='line"+window.linecount+"'>A Line Of Text</div><br />");
     window.linecount = window.linecount+1;
     $('body').append("<div id='line"+window.linecount+"'>A Line Of Text</div><br />");
     window.linecount = window.linecount+1;
     $('body').append("<div id='line"+window.linecount+"'>A Line Of Text</div><br />");
     window.linecount = window.linecount+1;
}

function remove3lines()
{
     $(body).remove('#line'+window.linecount);
     window.linecount = window.linecount-1;
     $(body).remove('#line'+window.linecount);
     window.linecount = window.linecount-1;
     $(body).remove('#line'+window.linecount);
     window.linecount = window.linecount-1;
}

然后，您可以通过单击按钮或链接调用所需的功能，如下所示：

<button onclick='add3lines()'>Add 3 Lines</button>
<button onclick='remove3lines()'>Remove 3 Lines</button>