.toggle()和.wrap()、.unwrap()引发的一个问题
前言
——本文有点自嗨
正文
在做《jQuery基础教程》（第四版）课后练习的时候，有一题是这样要求的：在单击作者名字时，把文本改为粗体（通过标签，而不是操作类或css属性），然后在随后的单击中，删除之前的<b>元素，就是说在粗体文本与正常文本之间切换
简单的代码就这样了
<p>a wonderful author</p>
于是想到了.wrap()方法（将每一个匹配的元素分别包装起来）
$(document).ready(function() {
$('p').click(function() {
$(this).wrap('<b></b>');
});
});
效果是这样的（google控制台效果）
<b><p>a wonderful author</p></b>
看起来总觉得怪怪的，块级元素被行内元素包裹
于是想到了.wrapInner()方法（将每一个匹配的元素的子内容(包括文本节点)包装起来）
$(document).ready(function() {
$('p').click(function() {
$(this).wrapInner('<b></b>');
});
});
效果是这样的（google控制台效果）
<p><b>a wonderful author</b></p>
插播
还有个.wrapAll()方法别忘啦（将每一个匹配的元素作为一个整体包装起来），注意和.wrap()的区别：一个是整体，一个是分别
下面进行第二步，哪里来的回哪里去
让<b>标签回去（删除）？
既然用了.wrap()，那就用.unwrap()（这里先不说.wrapInner()）
但是这个怎么用呢？单击奇数次添加，单击偶数次删除
好啦！好像有个.toggle(fn1, fn2)可以实现（坑爹的W3School这样说得）
于是乎
$(document).ready(function() {
$('p').toggle(function() {
$(this).wrap('<b></b>');
}, function() {
$(this).unwrap();
});
});
入坑
结果......（google控制台效果）
<p style="display: none;">a wonderful author</p>
作者直接消失了（死的好冤枉啊.....），将p的display设置为了none。
为什么会这样呢（在W3School实验的好好的）
经过网上搜索，万万没想到.toggle(fn1, fn2)在1.9版本被移除了、被移除了、被移除了....
所以只能按照.toggle()另一个定义执行（如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。）
而W3School上实验是成功的，是因为加了jQuery Migrate（迁移）插件
爬坑（此处不留爷自有留爷处）
$(document).ready(function() {
var a = false;
$('p').click(function() {
if (!a) {
$('p').wrap('<b></b>');
a = true;
} else {
$('p').unwrap();
a = false;
}
});
});
还是得回到最初的click上，这里先给声明一个变量a，并赋值false
第一次单击变粗体，并给a赋值true，这样下次单击就可以执行else语句删除粗体，同时给a赋值false
这样如此反复，就达到了交替切换的效果。
这是个很典型的解决方法，以后遇到此类情况都可以这样处理（如此好的方案当然是网上找到的）
自挖坑
作为处女座，其实是希望使用.wrapInner()来代替.wrap()的
$(document).ready(function() {
var a = 0;
$('p').click(function() {
if (a === 0) {
$('p').wrapInner('<b></b>');
a = 1;
} else {
$('p').unwrap();
a = 0;
}
});
});
结果你猜怎么着，第一次单击是这样的，好好的（google控制台效果）
<p><b>a wonderful author</b></p>
第二次单击呢？没反应、没反应、没反应.......
这是为什么呢
万万没想到.unwrap()是个偏心的人（删除元素的父元素，能快速取消.wrap()方法的效果），只和.wrap()搭配使用，不管.wrapInner()
公道话
依旧万万没想到.unwrap()方法呢，其实只是负责删除元素的父元素，不管有没有使用.wrap()方法。
只是恰好.wrap()是给元素添加了父元素
例如给<p>加个父元素div
<div><p>a wonderful author</p></div>
用.unwrap()试下
$(document).ready(function() {
$('p').click(function() {
$('p').unwrap();
});
});
结果div就没了（google控制台效果）
<p>a wonderful author</p>
如果<p>元素还有父元素，只要单击，就会像剥洋葱一样，一层一层的剥到body（body不能剥）
总结：以后尽量用.wrap()喽
