需求：根据数据动态生成单选组
代码：
<!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>
效果：
不惜勿喷