14、jQuery排他思想

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", "");
            });
        })

3、页面展示