如题:
比如我body里面有这么几个链接:
连接一
连接二
连接三
连接四
连接五
连接六
连接七
连接八
连接九
var link = document.getElementsByTagName("a");
for (var i = 0; i < link.length; i++) {
link[i].addEventListener("click", function() {
this.style.backgroundColor = "#000";
})
}
现在能实现单击其中一个链接改变它的背景色,但是如何能实现JQ中很容易实现的功能,点击其中一个,其它的样式也同时变了(切换)。
受 @小明 大神的启发,写了最优雅,最高效的方式(我自认为)。
以下是老答案:
好像没有原生的方法,试着扩展了一下:
然后就可以向 jQuery 一样使用 siblings() 了。
附带 html 代码的例子:
这种情况更多的是吧listener加在父级上,从event的target来判断来源吧。我是Demo
应该不是加在本级上,应该是从父元素遍历出来的,因为siblings()方法是可以带参数做筛选的。
再加一层循环呗
@toBeTheLight @mqycn 感谢感谢,确实都能实现同样的效果
@toBeTheLight 的更简洁,只是觉得,a标签如果多了,会不会有性能的影响,或许没有,我也只是这么猜,测试的话也不知道如何能测试性能开销。
@mqycn 的逼格更高,感觉更符合我需要的答案吧,
但具体哪位的更好,我也分辨不出来,总之很是感谢,都能解决实际的问题,至于 性能 暂时就只能不多做考虑了,毕竟我的水平在这。