00:00
好，那呃，下一步呢，就是我们这个，嗯，在它后边啊，鼠标移入进来的时候，它后边呢，能够去把这个。呃。这个叫按钮组啊，把按钮组给显示出来。呃，而且是这个鼠标移入到这个范围内显示按钮组，鼠标离开以后呢，把这个按钮组呢，就不显示了。其实呢，这个时候是把这个按钮组呢，就删掉了。那这个怎么去实现它呢？我们需要借助于这个地方哈。呃，也是在赛艇里边呢，我们需要去找。呃，也是往右这哈，这里边儿有一个I的ho do。Hover呢，就是鼠标移入一个控件的范围啊，就是触发这个hover这个事件。然后呢，还有一个爱的叫remove后。就是移除前面添加的那个元素，需要用到这么两个函数，它俩也是函数，然后传入的呢，也是traded和吹node。
01:08
哎，所以在这儿呢，又需要写两个函数，这个在哪呢？它们和爱的DIY do是同一级的。哎。复制一下这个名字，CTRLC。过来这哈。At ho do。来一个my at ho do。Remove。Ho do。好嘞，呃，那么就下边咱们去把这两个函数呢，我们去给它建出来。哎，为了看着方便，咱们就写前面了哈。
02:05
哎，这个我们这个函数的作用呢，就是在鼠标。移入我们节点范围时，去添加按钮组。哎，还有一个I的叫remove，后边到。Function。呃，这个是在。在鼠标。离开节点范围时。嗯，删除按钮组。那这个我们看哈，就是。
03:00
咱们先写这个添加的这个啊，先写这个添加的这个。嗯。我们先看一下哈，就这个按钮组。按钮组啊，在它这是怎么表示的。点右键检查。它其实这是一个图标嘛，啊，然后这个图标这个A呢。就是包含这个图标啊，就将来点的话呢，其实点的是这个超链接，再往外呢，是是是你看再往外这个东西吧，就把这两个按钮呢，就包起来了，所以按钮组是它。啊，你看这个这个名字哈。CTRLC。呃，BTN是按钮，Group就是组啊，然后后边是他拼了一个这个。嗯，也就是说这个按钮组的一个结构呢，就是有一个span span里边包含的AA里边呢，又包含的这个图标。啊，这个它按钮组呢，是这样一个结构。
04:05
按钮组。的标签结构啊，是这个span。哎，里边呢，包含我们的，呃，几个AA标签。啊，这个看你是有几个按钮，A标签里边呢，又有这个爱标签。啊，这是这个按钮锁。爱标签呢，就是那个按钮。所以说呢，咱们可以先不管里边的细节，咱们先看看这个span啊，这个添加和这个移除啊，这个事儿咱们得一点一点来做啊。咱们呃，先准备一下这个span。呃，这个当鼠标移入的时候呢，把它加进来，鼠标离开的时候呢，把它给删除。那这个时候我们得去确定一下这个SPA呢，加到哪了，这是这个SPA哈。
05:03
这个span呢，我们看它的这个位置啊。是在这个前面哈，你看我们SPA的前面是一个超链接。这个超链接呢，其实就是整个这个节点。这个是对应的嘛，啊，这整个这个节点。也就是说呢，这个span呢，它是加到了这个节点的后面。啊，加到了这个节点里边呢，加到了这个超链接的这个后面，啊，这个位置是在这儿。而这个Li呢，是整个哈，这个节点就是包括前面的这个很多东西都算上了，哎，具体位置呢，就是这个超链接的后边去加这个400。也就是说呢，我们得去找到这个超链接才行啊，找到链接在超链接的后边，用解块的一个函数呢，叫after。哎，就是在一个元素的后边去追加这个新的元素。哎，去添加这个SPA。嗯，哎，这就是说这个按钮组出现的位置。
06:02
是我们这个节点中。呃，这个节点吧，这个是这样的哈，是这个，呃，ID等于。啊，这个超链接的后面，哎。但这个序号是不一定的哈，序号我给它改成一个N，哎。就是这样一个超链接的这个后面，所以说呢，我们先去先去找到这个超链接。啊，所以说找到。哎，这个在后面去附着。呃，按钮组的超链接。那这个时候它的超链接的ID的格式就是它。这就是TD后边加一个A就好了，所以TD从这里边去取。从这里边我们去获取一下这个T。这是和刚才的那个分析是一样的。
07:00
那别了，咱们就在这后边直接就加上了啊。下了线，诶，这就是那个超链接的ID。超链接呢，这个它完整的单词哈，是这个anchor。这个毛的意思。毛，这个毛。船啊，汽车说抛锚了。这个毛啊，这个安就是这个毛。他的ID找到他以后呢，我们在。哎，去执行一下这个附附加。呃，执行在超链接后面去附加。元素的操作。十板元素的操作。井号啊。加上这个AID。第二。After。哎，后边加啥呢，咱们先。
08:02
随便写一个死板。哎，这后边呢，比如说我写一个大写字母A。就现在就写这一点，咱们下边呢，咱们来测试一下啊。CTRL加F5。诶。你还有了？啊。这个挺好玩是吧，嗯。这个我们看到确实是这个就加上了，哎给加到他后边了，那么这时候其实这个很明显的这个问题呢，就是说加了光加不行啊。你得给它去掉是吧，哎，你得给它去掉，去掉呢就是。我们在这个后边remove这里边儿呢，再给它去执行一下这个去掉它。
09:00
那么我们要想去掉它呢，你得能够找到这个SPA才能把SPA去掉啊，你不能把前面去掉啊，得把它去掉，想想把它去掉呢，你就得给它去设置ID啊，设置ID才能找到它。所以说呢，嗯。在这哈，我们在这哈。说这个。说我们为了诶。为了在需要移除。按钮组。的时候能够精确定位到。按钮组所在的这个SPA。需要给这个span呢，得设置。呃，有规律的。的ID。就是这个，这是我们按钮组哈，按钮组。的ID。也是我们用这个TD。
10:01
后边加上一个我们的约定啊，B TN group。加上这个。这就是这就是SPA这个ID。给它拼进去。哎，这回然后他就有ID了，他有ID以后呢，我根据这个ID。这连奏串啊。前边连后边也得连啊，对吧，这肯定得两两个加号。然后呢，这边我们也去找到这个ID。然后呢，这边去执行一下移除。哎。找到按钮组的ID啊，或者叫做拼接哈。哎，然后呢，去移除。对应的这个元素。按错了。
11:03
嗯，啊，这个是这个把自己删掉啊，自杀式删除。就是把这个元素删掉啊。来跑一下啊，看一下这个，这回看一下这个效果。CTRL加F。从往上从上往下刷哈。我们觉得这个地方好像有点。不太对哈。比刚才是其实还是管点用的。对吧，比刚才是管点用的，但是我们觉得没有说。达到我们希望的这个效果。哎，这个问题出在哪哈。呃，现在现在生成的这些呢，他们ID是重复的。就是说其实呢，是因为你删只能删一个，但它生成的话呢，生成了好多。
12:01
他们的ID是一样的，ID一样的呢，只有第一个是有效的，你只能删一个，但生成的生成了很多。啊，生成了很多，所以说呢，我们得另外一方面就是说得让他不要生成这么多，只生成一个，每次只生成一个。哎，当然说它为什么会生成这么多呢。这是我们节点的范围，咱们把它放大一点，这个鼠标呢，在移入的时候。哎，它其实呢，是有一个过程的。就他会多次触发。这个移入的这个这个事件。这个后边啊，这个鼠标一入呢。Hover呢，这个鼠标的移入啊，它有多次触，它会多次触发。啊，他会多次处罚。那每触发一次就生成一个，触发一次生成一个，但是我们移除的这个呢，移除的时候是只能是因为ID是重复的嘛，它只能删掉一个。
13:00
就就留下来以前生成的多个。哎，所以这个其实也不难办，我们就让他往进添加的时候检查一下，如果以前已经加过了就不加了。啊。就可以了。嗯。嗯，这样哈，在这儿哈。判断一下在这儿呢，判断一下以前。是否已经添加了。已经添加了。呃，这个按钮组啊，已经加过就不加了。怎么判断呢？哎，就是用用用用用这个东西哈。哎，这个。解，Query选择器哈，看一下它的长度。
14:03
哎，如果说是大于零。或者。啊对，大于零咱就return了。往下就不走了啊，它不大于零，也不可能小于零，就它等于零的时候不存在的时候，才执行这个后边的操作，哎，就加这么一个判断。CTRL加F。哎，这就是说你看这个每次就只加一个啊，然后这个节点上你点一下呢，那把它给定住，这个是J税，本来就有这功能，这个不需要我们额外做什么啊，这个定定住，把它定住，让他在这儿不要跑哈，让他在这儿不要跑丢啊，这个是接税，本来就有，不需要我们做什么。啊，现在这时候我们就放心了啊，这个SPA呢，现现在已经有了啊，现在已经有这个SPA了。
我来说两句