修改徽章的css模式，并修复以前的徽章不能保存的问题

languages/en.css

@@ -320,8 +320,8 @@
 {
 	background-position-x: -76px;
 }
-.badge-0,
-.badge-2
+.badge[data-badge='0']::before,
+.badge[data-badge='2']::before
 {
 	background-position-x: -36px;
 }

languages/ko.css

@@ -312,8 +312,8 @@
 {
 	background-position-x: -76px;
 }
-.badge-0,
-.badge-2
+.badge[data-badge='0']::before,
+.badge[data-badge='2']::before
 {
 	background-position-x: -36px;
 }

languages/zh-TW.css

@@ -310,7 +310,8 @@
 {
 	background-position-x: -64px;
 }
-.badge-0
+.badge[data-badge='0']::before,
+.badge[data-badge='17']::before
 {
 	background-position-x: -72px;
 }

languages/zh.css

@@ -310,11 +310,8 @@
 {
 	background-position-x: -64px;
 }
-.badge-0
-{
-	background-position-x: -72px;
-}
-.badge-17
+.badge[data-badge='0']::before,
+.badge[data-badge='17']::before
 {
 	background-position-x: -72px;
 }

script.js

@@ -717,25 +717,25 @@ function initialize()
 
 	//添加徽章
 	const className_ChoseBadges = "show-all-badges";
-	teamBigBoxs.forEach(tb=>{
+	teamBigBoxs.forEach(teamBigBox=>{
 		//徽章
-		const teamBadge = tb.querySelector(".team-badge");
+		const teamBadge = teamBigBox.querySelector(".team-badge");
 		if (!teamBadge) return;
-		const badges = Array.from(teamBadge.querySelectorAll(".badge-bg"));
-		badges.forEach((badge,bidx) => {
-			badge.onclick = function(){
-				if (teamBadge.classList.contains(className_ChoseBadges))
-				{
-					teamBadge.classList.remove(className_ChoseBadges);
-					formation.badge = bidx;
-					refreshTotalHP(formation.teams[0]);
-					creatNewUrl();
-				}else
-				{
-					teamBadge.classList.add(className_ChoseBadges);
-				}
-			};
-		});
+		const badges = Array.from(teamBadge.querySelectorAll(".badge-radio"));
+		function setBadge(){
+			if (teamBadge.classList.contains(className_ChoseBadges))
+			{
+				teamBadge.classList.remove(className_ChoseBadges);
+				formation.badge = parseInt(this.value,10); //如果将来改成每队有徽章，就修改这里的设定
+				const teamTotalInfoDom = teamBigBox.querySelector(".team-total-info"); //队伍能力值合计
+				refreshTeamTotalHP(teamTotalInfoDom, formation.teams[0]);
+				creatNewUrl();
+			}else
+			{
+				teamBadge.classList.add(className_ChoseBadges);
+			}
+		}
+		badges.forEach(badge => badge.onclick = setBadge);
 	});
 
 	//编辑框

solo.html

@@ -48,24 +48,24 @@ var formation = new Formation(teamsCount,6);
 		<ul class="teams">
 			<li class="team-bigbox team-1">
 				<ul class="team-badge">
-					<input type="radio" name="team-0-badge" class="badge-radio" value="0" id="team-0-badge-0" checked><label class="badge-bg" for="team-0-badge-0"><div class="badge badge-0"></div></label>
-					<input type="radio" name="team-0-badge" class="badge-radio" value="1" id="team-0-badge-1"><label class="badge-bg" for="team-0-badge-1"><div class="badge badge-1"></div></label>
-					<input type="radio" name="team-0-badge" class="badge-radio" value="2" id="team-0-badge-2"><label class="badge-bg" for="team-0-badge-2"><div class="badge badge-2"></div></label>
-					<input type="radio" name="team-0-badge" class="badge-radio" value="3" id="team-0-badge-3"><label class="badge-bg" for="team-0-badge-3"><div class="badge badge-3"></div></label>
-					<input type="radio" name="team-0-badge" class="badge-radio" value="4" id="team-0-badge-4"><label class="badge-bg" for="team-0-badge-4"><div class="badge badge-4"></div></label>
-					<input type="radio" name="team-0-badge" class="badge-radio" value="5" id="team-0-badge-5"><label class="badge-bg" for="team-0-badge-5"><div class="badge badge-5"></div></label>
-					<input type="radio" name="team-0-badge" class="badge-radio" value="6" id="team-0-badge-6"><label class="badge-bg" for="team-0-badge-6"><div class="badge badge-6"></div></label>
-					<input type="radio" name="team-0-badge" class="badge-radio" value="7" id="team-0-badge-7"><label class="badge-bg" for="team-0-badge-7"><div class="badge badge-7"></div></label>
-					<input type="radio" name="team-0-badge" class="badge-radio" value="8" id="team-0-badge-8"><label class="badge-bg" for="team-0-badge-8"><div class="badge badge-8"></div></label>
-					<input type="radio" name="team-0-badge" class="badge-radio" value="9" id="team-0-badge-9"><label class="badge-bg" for="team-0-badge-9"><div class="badge badge-9"></div></label>
-					<input type="radio" name="team-0-badge" class="badge-radio" value="10" id="team-0-badge-10"><label class="badge-bg" for="team-0-badge-10"><div class="badge badge-10"></div></label>
-					<input type="radio" name="team-0-badge" class="badge-radio" value="11" id="team-0-badge-11"><label class="badge-bg" for="team-0-badge-11"><div class="badge badge-11"></div></label>
-					<input type="radio" name="team-0-badge" class="badge-radio" value="12" id="team-0-badge-12"><label class="badge-bg" for="team-0-badge-12"><div class="badge badge-12"></div></label>
-					<input type="radio" name="team-0-badge" class="badge-radio" value="13" id="team-0-badge-13"><label class="badge-bg" for="team-0-badge-13"><div class="badge badge-13"></div></label>
-					<input type="radio" name="team-0-badge" class="badge-radio" value="14" id="team-0-badge-14"><label class="badge-bg" for="team-0-badge-14"><div class="badge badge-14"></div></label>
-					<input type="radio" name="team-0-badge" class="badge-radio" value="15" id="team-0-badge-15"><label class="badge-bg" for="team-0-badge-15"><div class="badge badge-15"></div></label>
-					<input type="radio" name="team-0-badge" class="badge-radio" value="16" id="team-0-badge-16"><label class="badge-bg" for="team-0-badge-16"><div class="badge badge-16"></div></label>
-					<input type="radio" name="team-0-badge" class="badge-radio" value="17" id="team-0-badge-17"><label class="badge-bg" for="team-0-badge-17"><div class="badge badge-17"></div></label>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="0" id="team-0-badge-0" checked><label class="badge" data-badge="0" for="team-0-badge-0"></label></li>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="1" id="team-0-badge-1"><label class="badge" data-badge="1" for="team-0-badge-1"></label></li>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="2" id="team-0-badge-2"><label class="badge" data-badge="2" for="team-0-badge-2"></label></li>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="3" id="team-0-badge-3"><label class="badge" data-badge="3" for="team-0-badge-3"></label></li>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="4" id="team-0-badge-4"><label class="badge" data-badge="4" for="team-0-badge-4"></label></li>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="5" id="team-0-badge-5"><label class="badge" data-badge="5" for="team-0-badge-5"></label></li>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="6" id="team-0-badge-6"><label class="badge" data-badge="6" for="team-0-badge-6"></label></li>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="7" id="team-0-badge-7"><label class="badge" data-badge="7" for="team-0-badge-7"></label></li>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="8" id="team-0-badge-8"><label class="badge" data-badge="8" for="team-0-badge-8"></label></li>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="9" id="team-0-badge-9"><label class="badge" data-badge="9" for="team-0-badge-9"></label></li>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="10" id="team-0-badge-10"><label class="badge" data-badge="10" for="team-0-badge-10"></label></li>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="11" id="team-0-badge-11"><label class="badge" data-badge="11" for="team-0-badge-11"></label></li>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="12" id="team-0-badge-12"><label class="badge" data-badge="12" for="team-0-badge-12"></label></li>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="13" id="team-0-badge-13"><label class="badge" data-badge="13" for="team-0-badge-13"></label></li>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="14" id="team-0-badge-14"><label class="badge" data-badge="14" for="team-0-badge-14"></label></li>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="15" id="team-0-badge-15"><label class="badge" data-badge="15" for="team-0-badge-15"></label></li>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="16" id="team-0-badge-16"><label class="badge" data-badge="16" for="team-0-badge-16"></label></li>
+					<li><input type="radio" name="team-0-badge" class="badge-radio" value="17" id="team-0-badge-17"><label class="badge" data-badge="17" for="team-0-badge-17"></label></li>
 					<div class="team-total-info"><div class="tIf-total-hp"></div><div class="tIf-total-rcv"></div></div>
 				</ul>
 				<div class="team-box-name">

style-monsterimages.css

@@ -807,7 +807,7 @@ var sawokens = [
 ];
 */
 /* 徽章背景 */
-.badge-bg{
+.badge{
 	background-image: url(images/badge-bg.png);
 	width: 53px;
 	height: 41px;
@@ -815,7 +815,8 @@ var sawokens = [
 	text-align: center;
 	margin-right: 5px;
 }
-.badge{
+.badge::before{
+	content: "";
 	display: inline-block;
     vertical-align: middle;
 	background-repeat: no-repeat;
@@ -823,58 +824,58 @@ var sawokens = [
 	width: 36px; height: 30px;
 	background-position-x: 0;
 }
-.badge-0{
+.badge[data-badge='0']::before{
 	background-position-y: 0px;
 }
-.badge-1{
+.badge[data-badge='1']::before{
 	background-position-y: -30px;
 }
-.badge-2{
+.badge[data-badge='2']::before{
 	background-position-y: -60px;
 }
-.badge-3{
+.badge[data-badge='3']::before{
 	background-position-y: -90px;
 }
-.badge-4{
+.badge[data-badge='4']::before{
 	background-position-y: -120px;
 }
-.badge-5{
+.badge[data-badge='5']::before{
 	background-position-y: -150px;
 }
-.badge-6{
+.badge[data-badge='6']::before{
 	background-position-y: -180px;
 }
-.badge-7{
+.badge[data-badge='7']::before{
 	background-position-y: -210px;
 }
-.badge-8{
+.badge[data-badge='8']::before{
 	background-position-y: -240px;
 }
-.badge-9{
+.badge[data-badge='9']::before{
 	background-position-y: -270px;
 }
-.badge-10{
+.badge[data-badge='10']::before{
 	background-position-y: -300px;
 }
-.badge-11{
+.badge[data-badge='11']::before{
 	background-position-y: -330px;
 }
-.badge-12{
+.badge[data-badge='12']::before{
 	background-position-y: -360px;
 }
-.badge-13{
+.badge[data-badge='13']::before{
 	background-position-y: -390px;
 }
-.badge-14{
+.badge[data-badge='14']::before{
 	background-position-y: -420px;
 }
-.badge-15{
+.badge[data-badge='15']::before{
 	background-position-y: -450px;
 }
-.badge-16{
+.badge[data-badge='16']::before{
 	background-position-y: -480px;
 }
-.badge-17{
+.badge[data-badge='17']::before{
 	background-position-y: -510px;
 }
 

style.css

@@ -375,19 +375,22 @@ ul{
 	display: inline-block;
 }
 /* 徽章，平时都隐藏 */
-.badge-bg{
-	display: none;
-	cursor: pointer;
+.team-badge li{
+	display: inline-block;
 }
 .badge-radio{
 	display: none;
 }
+.badge{
+	display: none;
+	cursor: pointer;
+}
 /* 显示所有徽章时则打开 */
-.show-all-badges .badge-bg{
+.show-all-badges .badge{
 	display: inline-block;
 }
 /* 选中的徽章平时也打开 */
-.team-badge .badge-radio:checked+label{
+.team-badge .badge-radio:checked+.badge{
 	display: inline-block;
 }
 /*队伍的背景色*/