同一个HTML结构，实现相同的点击效果,三个版本的<Script>代码一个比一个更简洁更优雅
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>点击效果：
版本1.0
<script>
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function() {
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'blue';
})
}
</script>版本2.0
<script src="jquery.min.js"></script>
<script>
$(function() {
//隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function() {
//2、当前元素变化背景颜色
$(this).css("background", "blue");
//3、其余的兄弟是去掉去背景颜色
$(this).siblings("button").css("background", "");
})
})
</script>版本3.0
<script src="jquery.min.js"></script>
<script>
$(function() {
$("button").click(function() {
$(this).css("background", "blue").siblings().css("background", "");
})
</script>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/6270.html
