为点击的按钮添加高亮

1         .btnCss {
2             background-color: #F6F6F6;
3             color: #000000;
4         }
5 　　　　　　
6         .upBtnCss {
7             background-color: #FD8D27;
8             color: #ffffff;
9         }

<div id="maxBox">
     <button id="dx_BS1" class="dx_BS btnCss layui-btn layui-btn-sm layui-btn-me-server"  onclick="chooseType(this)">按钮一</button>
     <button id="dx_BS2" class="dx_BS btnCss layui-btn layui-btn-sm layui-btn-me-server"  onclick="chooseType(this)">按钮二</button>
     <button id="dx_BS3" class="dx_BS btnCss layui-btn layui-btn-sm layui-btn-me-server"  onclick="chooseType(this)">按钮三</button>
     <button id="dx_BS4" class="dx_BS btnCss layui-btn layui-btn-sm layui-btn-me-server"  onclick="chooseType(this)">按钮四</button>
 </div>

 1         //方法一：
 2         $('.dx_BS').on('click', function (e) {
 3             var $target = $(event.target); //此处就是可以查看是那个点击的jQ对象
 4 
 5             //获取点击按钮 id
 6             var canshu = $(this).attr("id"); 
 7 
 8             //获取相同 class 元素
 9             var arr = document.getElementsByClassName("dx_BS");
10 
11             for (var i = 0; i < arr.length; i++) {
12 
13                 //遍历所有子元素移除 高亮 class
14                 arr[i].classList.remove("upBtnCss");
15             }
16 
17             // 为点击的按钮添加 高亮 class
18             document.getElementById(canshu).classList.add("upBtnCss");
19         });
20 
21 
22         //方法二
23         function chooseType(e) {
24 
25             //获取点击按钮 id
26             var canshu = $(e).attr("id"); 
27 
28             //获取相同 class 的兄弟元素（首先需要为所有的兄弟元素添加相同的class）
29             var arr = document.getElementsByClassName("dx_BS");
30 
31             for (var i = 0; i < arr.length; i++) {
32 
33                 //遍历所有子元素移除 高亮 class
34                 arr[i].classList.remove("upBtnCss");
35             }
36 
37             // 为点击的按钮添加 高亮 class
38             document.getElementById(canshu).classList.add("upBtnCss");
39         }
40 
41 
42         //方法三
43         function chooseType(e) {
44 
45             //获取点击按钮 id
46             var canshu = $(e).attr("id"); 
47 
48             //获取父id
49             var boxId = document.getElementById(e.id).parentNode.id;
50 
51             //获取父id下面所有的子元素
52             var arr = document.getElementById(boxId).children;
53 
54             for (var i = 0; i < arr.length; i++) {
55                 //遍历所有子元素移除 高亮 class
56                 arr[i].classList.remove("upBtnCss");
57             }
58 
59             // 为点击的按钮添加 高亮 class
60             document.getElementById(canshu).classList.add("upBtnCss");
61         }