京东的“加关注”相当于淘宝中的“收藏”功能一样,很重要,很常用。京东提供了一个加关注的velocity方法,如下:
$!jshopCommon.addFavorites(skuId)
但是它有一点不好,他会在生成的DOM中添加一段如下的属性:
<input type="button" class="btn-coll" id="collSKUID" value="加关注" style="width:auto!important;" />
注意那一段紫色的代码,给一个width:auto!important; 史上最高权重的CSS,让你直接无法修改该按钮的宽度。我一直不能明白京东的前端为何有此一举!相信,在做京东的设计师也遇到了此类的问题,当你的设计无法被完美展示出来时,相信你必定很痛苦。下面给一个解决的方法
不用$!jshopCommon.addFavorites,改用手动录入加关注的代码,如下:
#set($id = "coll" + $!goods.goodsId)
<input type="button" class="btn-coll" id="$!id" value="加关注" />
注意,此处的id属性值并不是以zx开头,以确保能正确的被关注。同时也绕过了ID必须以zx开头的验证规则。此法纯属投机取巧,指不准哪天就不OK了。。。建议京东的前端去掉那一段“强制auto宽度的代码”吧。