为选中的按钮添加特定属性

合集 - 前端(9)

1.CSS、JS、jQuery中选择器总结2023-05-122.JS中得到自定义属性值2023-05-12

3.为选中的按钮添加特定属性2023-05-13

4.Tab栏切换2023-05-135.event 和 this 的区别2023-05-146.下拉菜单的实现2023-05-147.mouse事件2023-05-148.Vue中watch监听属性新旧值相同问题解决方案2023-12-019.export、exports以及export default 的导入导出2023-12-05

收起

为选中的按钮添加特定属性

原生 JS

//获取对象        
const buttons = document.querySelectorAll("button")
//遍历对象，为对象添加监听事件
 for(let i =0;i < buttons.length;i++){
    buttons[i].addEventListener('click',function () {
        //先清空，再添加
            for(let i =0;i < buttons.length;i++){
                    buttons[i].style.background = ''
                }
                this.style.background = 'red'
            })
        }

jQuery（利用了排他思想）

        $(function () {
            $('button').click(function () {
                $(this).css('background','red')
                //排他
                $(this).siblings().css('background','')
            })
        })