重难点解析：影刀商城---下一页---点击/不可点击

近期在给小伙伴答疑的时候，发现大家普遍在关于元素属性编辑这块犯了难~

典型场景就是【捕捉元素后不知如何如何编辑】&&【编辑后元素仍然被点击】。

那我就以教学中---影刀商城中【下一页】元素的通过可点击/不可点击来结束翻页循环来解析下要点。

大概会涉及到3个小知识点：【元素编辑器和网页源码的对应】+【获取元素属性】+【找不同做判断】

我们先来说第一个知识点---元素编辑器和网页源码的对应：

1.元素编辑器和网页源码是相对应的，不同的在于排列方式：

举个栗子：

下一页元素在网页源码中是从上到下从外到内的排列：ul/li/a

同样ul/li/a，下一页元素在影刀编辑器中的排列是直铺展开的。

正因为影刀编辑器的元素编辑和网页源码的层级结构是相对应的，因此才有【校验】的说法。

换句话说，元素编辑里往上取消一个对勾，在网页里面则对应选择当前元素的父元素。

在元素编辑里的操作要不要勾选，可以通过网页元素校验找得到/找不到的反馈再进行做抉择。

🆗现在我们再来说第二个知识点---获取元素属性：

有小伙伴想知道当前元素都有哪些属性，其实最根本的方法就是到网页源码里面去查看。

先来说第一个注意的点：不同的标签有不同的属性，而且是先有标签再有属性，可不要看叉🥹🥹🥹

如下面的li 标签是有 title || tabindex||class属性的，a标签里面是只有class属性。

再来说第二个注意的点，同个标签里面的属性值会发生变化~（也是大家普遍困惑的地方）

当前页码为1，下一页元素可点击时的，网页源码各标签属性如下：

当前页码为5，下一页元素不可点击时，网页源码各标签属性如下：

可以看到li标签增加aria-disabled属性，并且值为true。

注意：大家的错误点在于aria-disabled属性是li标签的，但在元素编辑器里精确到了下面的a标签！

正确的元素编辑器里应该到li标签就结束了

元素编辑器里还要不要下面的a标签，看勾不勾选还能不能校验到。

（PS：勾选到父元素就会包含下面的子元素，勾选父元素找到的元素是唯一的话，到不到下面的子元素都可以，看你的需要。因为现在aria-disabled的属性是在父元素li,所以就要勾选到父元素。其他具体情况举具体分析，思路是类似的）。

🆗那再来说第3个知识点---找不同做判断：

要点其实在前面已经说得差不多了，我这里就直接上指令流程图了：

撒花结束，再有疑问评论区可留言~