京東的“加關注”相當於淘寶中的“收藏”功能一樣,很重要,很常用。京東提供了一個加關注的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寬度的代碼”吧。