首页/ 填坑/ 文章详情

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

唐牛才是食神唐牛才是食神 06-15 10:51
(*°▽°*)八(*°▽°*)♪,解决了
唐牛才是食神唐牛才是食神 06-15 10:49
发现不得了的东西,今晚回去好好研究下...
胖螺胖螺 02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!
强哥强哥 2021-12-08 15:49
怎么看文章作者是谁呀?
big2catbig2cat 2021-08-27 16:11
然而没什么用,smartpss不兼容老录像机,就算能看回放,很多时间点在回放里也看不到