艺灵设计

全部文章
×

2种版本的天猫关注且数字同步变化代码

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2014-12-08 16:58:33 - 阅: - 评:2 - 积分:0

又是一个小儿科的问题,但艺灵还是需要写一篇教程帖普及下知识。今天艺灵就教大家用2种版本的天猫关注且数字同步变化代码。

下面开始教程讲解。准备工作是:需要用到-webkit内核的浏览器,推荐chrome(谷歌)。如果使用的是360安全或搜狗等双核浏览器时需要切换至极速模式。切换方法如下图:
360安全浏览器切换成极速内核

版本一

准备工作完成后,我们先在chrome浏览器中打开一家天猫店铺,下面以“马尔杜克”为例。(提示:最好是旗舰店,专营店的话会没有关注的ID标识--data-brandid!)

进入店铺后,我们先把鼠标放到“马尔杜克旗舰店”上面--然后在下拉框中关注的地方右键--审查元素--找到最近的父级class="hd"--右键将代码复制出来。具体操作如图:
 

这个是完整的代码,但是我们并不需要这么多,只需要提取其中用到的部分即可,精简版代码如下:

 

  1. <div data-title="天猫关注,带数字的代码">
  2.  <a class="follow-btn j_CollectBrand" data-brandid="20972725" href="#" ><span>关注</span></a>
  3.  <em class="j_CollectBrandNum" data-brandid="20972725">0</em>
  4. </div>

注意上面标红和标黄的代码。红色表示需要替换,黄色表示查看ID标识。下面再来教大家获取ID。

还是在审查元素状态下,按下Ctrl+F查找,然后输入前面提到过的data-brandid,这时我们可以看到黄色高亮区,复制后面的数字,替换掉红色就可以了。如下图:
 

好了,第一个版本的天猫关注且带数字的代码就已经制作完成了,下面来放一张关注的裸码预览图:
 
(裸码:未添加任何css样式)

这里需要说一下,虽然数字会已经显示出来了,但有一个缺点:
关注后页面需要刷新一下数字才会更新。

下面再来介绍下第二个版本的关注代码,鼠标滑过时可自动切换“关注”或“取消”状态,点击后数字会自动同步,页面不需要刷新。

版本二

前面操作都一样,在第2步时需要变化一下。直接点击logo跳转到一个新页面--鼠标放到关注上面右键--找到最近的父级class="brandBaseInfo-con"--右键将代码复制出来。具体操作如图:
 

 

  1. <div data-title="天猫关注,数字时时更新的代码">
  2.  <em class="j_CollectBrandNum" data-brandid="20972725">0</em>人 关注</p>
  3.  <a class="ui-brand-btn j_CollectBrand" data-brandid="20972725" ><span>已关注</span></a>
  4. </div>

下面来看版本二的裸码效果图:
 

好了,2个版本的方法已经介绍完毕,赶紧来操作一下吧!(注意:样式自己修改,这里只是裸码状态!)

2015.5.30更新

其实早就该更新了,只是一直没有更新。现在的天猫关注已经不行了,屏蔽的时间是:2015年4月上旬。

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:/code/2014-12-08/233.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 2种版本的天猫关注代码 关注且数字同步变化 天猫关注数据同步 可取消关注的代码 data-brandid

上一篇: 2种方法解决淘宝店铺中提示不能使用他人图片的问题   下一篇: 制作天猫淘宝店铺中单个宝贝收藏代码

相关文章

评论区