jQuery单选组美化特效

需求：根据数据动态生成单选组

代码：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>jQuery单选选中美化特效</title>
 </head>
 <body>
     <style type="text/css">
     h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
     @charset 'utf-8';
     html,body {
              background: #b1afaf;
         }
         .wrap {
             width: 200px;
             height: 100px;
             background: #ffffff;
             margin: 5px ;
             box-shadow: 1px 1px 10px #333,-1px -1px 10px #333;
             cursor: pointer;
             /* line-height: 20px; */
             overflow: hidden;
             /* text-overflow: ellipsis; */
             white-space: nowrap;
             border: 5px solid  #eef2e6;
             float: left;
         }
         .wrap div {
             display: contents;
             width: 200px;
             height: 100px;
             background: #7dbee6;
             padding-top: 1px;
         }
         /*#menu {
             height: 300px;
             width: 200px;
             background: #ffffff;
             float: left;
             margin-top: 25px;
             box-shadow: 1px 1px 10px #333, -1px -1px 10px #333;
         }*/
         /*#user {
             width: 500px;
             height: auto;
             float: left;
             margin-top: 20px;
         }*/
 </style>
 <div>
 <!-- <div id ='menu'></div> -->
 <div id ='user'></div>
 </div>
 <script src="js/jquery.js"></script>
 <script>
     $("#user").empty()
     $(function() {
         let arr =[0,1,2,3,4,5,6,7,8];
         var bo = document.getElementById('user');
         for(var i=0; i<arr.length; i++){
             var div = document.createElement('div');
                 div.innerHTML = '<div><h1>'+arr[i]+'</h1></div>';
                 div.className = "wrap";
                 div.setAttribute("switch","off");
                 div.setAttribute("D",arr[i]);
                 div.onclick = function(){
                     if ($(this).attr("switch") == "off") {
                         $(this).children("div").css({
                             "display" : "block",
                             "color" : "#FFF"
                         }),
                         $(this).attr("switch","on");
                         $(this).siblings().attr("switch","off");
                         $(this).siblings().children("div").css({
                             "display" : "contents",
                             "color" : "#000"
                         })
                     }else {
                         $(this).children("div").css({
                             "display" : "contents",
                             "color" : "#000"
                         }),
                         $(this).attr("switch","off");
                     }
                 };
                 bo.insertBefore(div, bo.lastChild);
         }
 });
 </script>
 </body>
 </html>

效果：

不惜勿喷