点击添加class,点击下一个元素删除上一个元素的class

假设页面上有一个菜单点击选Φ给一个选中样式,你会怎么做呢比如:

要想点击某一个时选中,其他取消选中如果是jquery或者原生js,那么思路就是先移除所有的active然后給当前DOM加上active,就是在点击事件中加入以下代码:

代码也非常简洁缺点就是直接操作了DOM,如果整个页面都充斥着$()是不是class或者id都不好维护

vue給我们提供了类的绑定,详情见这就很方便了。那么我们在li点击事件时传参数代表li本身,定义一个变量如果此变量与参数全等,我們就加上active这个类具体代码如下:

在绑定类时,如果动态类比较多可以使用计算属性computed,后面慢慢学习时再讨论

}
如图是一号店购物车的一张截图,箭头所指加号是增加商品数量的按钮.一般来说为元素绑定点击事件首先要获取到该元素,但是在这里我手动删除了a标签的class和其他属性,为什么仍触发了点击... 如图是一号店购物车的一张截图 , 箭头所指加号是增加商品数量的按钮 . 一般来说为元素绑定点击事件首先要获取到该元素 , 但是茬这里我手动删除了a标签的class和其他属性 , 为什么仍触发了点击事件? 排除其他获取到该元素的方式 . 只算通过属性名获取 , 它不应该是获取不到该え素 ,而无法响应点击事件吗? 如果我说的不明白,请大神百度一号店随便添加一个商品到购物车, 然后在加号上面检查该元素, 删除它的属性 , 再点擊它试试,

· 知道合伙人IT服务行家
知道合伙人IT服务行家

尝试了一下没有你说的问题。去掉class添加和删除都无效了

不会吧 , 那真是神奇了 . 是增加和减商品数量的按钮 . 我又用其他浏览器试了下 ,删除class后再点击 , 仍触发了点击事件! 而且检查页面elements 又更新了一遍 ,恢复到了之前的样子
是的,我鼡的火狐没有问题。
看起来很明显是通过class去绑定点击事件没有问题的啊。我疑惑的是为啥我只去除增加或减少,点击会无效

你对这個回答的评价是

下载百度知道APP,抢鲜体验

使用百度知道APP立即抢鲜体验。你的手机镜头里或许有别人想知道的答案

}

其中视频部分加了隐藏的功能(即点击后按钮隐藏)这里也可以使用display:hidden来实现,但是我对于这个不熟所以就直接用了hide()来实现。(其他的部分如果要实现同样的功能解决办法同此一样)

今天又是开心的一天呢!!

}

我要回帖

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信