首页/ 填坑/ 文章详情

siblings 链式写法,选项卡函数变得更优雅

JavaScript siblings 链式写法 选项卡 发布于 2020-11-18

在网页里有一个常见的布局:选项卡布局,它将相近的内容放在一起,通过选项卡控制内容的显示与隐藏。

选项卡布局大大提升了网页的空间的利用率,更少的空间,放更多的内容。

选项框HTML

HTML<ul>
    <li class="active" onclick="switchTab($(this)))">充话费</li>
    <li onclick="switchTab($(this)))">充流量</li>
    <li onclick="switchTab($(this)))">充固话</li>
</ul>

选项卡切换后,为了表示当前选项正在选中,选项卡又增加选中的状态,以示区分。

优化前的选项框函数

JS/**
 * 选项框
 * method switchTab
 * params {Object} _this 当前对象
 */
function switchTab(_this) {
    $('ul').find('li').removeClass('active');
    _this.addClass('active')
    //do something
}

很长的一段时间,我都是通过先找到父节点,移除所有选中状态,再为当前节点,添加已选中状态。该方法虽然能达到预期效果,不过总感觉有点别扭,冥冥之中感觉应该用一行代码即可。

siblings() 方法返回被选元素的所有同级元素。

优化后的选项框函数

JS/**
 * 选项框
 * method switchTab
 * params {Object} _this 当前对象
 */
function switchTab(_this) {
   _this.addClass('active').siblings().removeClass('active');
    //do something
}

偶遇 siblings 方法还得一次加班说起,因某种原因,需要对别人的网站进行分析,结果发现了 siblings 方法将2行代码,用链式方式,压缩到一行代码。

至此,优化了以前的代码,代码变得更加精洁;同时明悟:写代码不能只一味闭门造车,偶尔走出去,会有意想不到的收获!

文章评论0 records

最新 最早

0

最新评论Latest comments

HentaiCatHentaiCat 2020-12-30 10:22
考科目二全程很紧张,考了三次才过,有次侧方入库直接pass,100分扣完,呜呜呜~
猫猫酱猫猫酱 2020-11-12 10:56
一入多肉深似海,说多都是泪
soulkunsoulkun 2020-11-05 15:54
IconFont的图标真的很好用!!!
无限链霉球菌无限链霉球菌 2020-11-03 11:41
药店,了解一下(`・ω・´)
HentaiCatHentaiCat 2020-11-02 15:28
(ಡωಡ)很实用,直接拿走...