14、jQuery排他思想
1、排他思想案例分析
实现多选一的效果,当前元素设置样式,其余的兄弟元素清除样式
2、代码实现
(1)引入js文件
<script src="jquery.min.js"></script>
(2)页面样式
<button>排他思想</button>
<button>排他思想</button>
<button>排他思想</button>
(3)js代码
$(function() {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function() {
// 2. 当前的元素变化背景颜色
$(this).css("background", "pink");
// 3. 其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings("button").css("background", "");
});
})