实现简易的手风琴样式
蓝桥最新一期的楼赛是实现手风琴样式,这个我们可以考虑到几个解决方案,我们先来看题
题目要求
题目要求我们的鼠标滑动或点击到某个盒子上后图片会被拉长,离开鼠标或者点击其他盒子后图片回复原来的样子,以达到手风琴样式效果,最后效果图如下所示
代码结构
- html结构,官方给的html结构是这种通过两层嵌套的,并且以active和option来对样式进行控制
<div class="options"> <div class="option active" style="--optionBackground:url(../images/pic1.jpeg);" id="item1"> <div class="shadow"></div> </div> </div> 复制代码
实现方案
- 整体逻辑:我们可以通过JQ的addClass和removeClass来对包含盒子进行一个样式的添加和移除,所以我们需要预先设置好我们对两种图片的样式,然后通过hover来实现鼠标的悬浮和离开配合add和remove来添加样式。
- 冗余代码实现方法,因为我们的每一个盒子需要不同的id来控制每个盒子的悬浮事件,所以我们需要给四个盒子设置事件,所以这里就造成了极大的代码冗余,代码如下,我们需要四乘以现在的代码量来实现这个功能,所以我下面又提供了另一种写法
$("#item1").hover(function () {//鼠标进入和离开事件 $("#item1").addClass("active") }, function () {//离开就恢复初始样式 $("#item1").removeClass("active") }) 复制代码
- 简易代码实现方法,为了减少代码冗余的问题,所以采取了这种方案,即当鼠标点击盒子后我们通过对
option
的子类进行class的查找,找到后移除,移除后再通过e来进行点击后增加class,从而进一步实现功能
$('.option').click(e=>{ $('.options').find('.active').removeClass('active'); $(e.target).addClass('active'); }) 复制代码
总结
在开发中总会有这种代码冗余,这虽然是楼赛的一道web题,但是还是想一下如何减少冗余,使用轻便的代码来实现更好的功能,所以我们在做功能的时候可以考虑其他实现方案,比如说这里我们可以通过e
来进点击绑定和class的添加,避免了我们通过id来绑定事件和添加class