增加type选择时预先显示可以打什么杀

multi.html

@@ -472,21 +472,21 @@ var formation = new Formation(teamsCount,5);
 			</div>
 			<div class="types-div"><!--类型-->
 				<ul class="type-list">
-					<li><input type="checkbox" class="type-check" name="types" value="4" id="search-type-4" /><label class="type-icon" data-type-icon="4" for="search-type-4"><!--龍--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="5" id="search-type-5" /><label class="type-icon" data-type-icon="5" for="search-type-5"><!--神--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="7" id="search-type-7" /><label class="type-icon" data-type-icon="7" for="search-type-7"><!--惡魔--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="8" id="search-type-8" /><label class="type-icon" data-type-icon="8" for="search-type-8"><!--机械--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="1" id="search-type-1" /><label class="type-icon" data-type-icon="1" for="search-type-1"><!--平衡--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="6" id="search-type-6" /><label class="type-icon" data-type-icon="6" for="search-type-6"><!--攻撃--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="2" id="search-type-2" /><label class="type-icon" data-type-icon="2" for="search-type-2"><!--体力--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="3" id="search-type-3" /><label class="type-icon" data-type-icon="3" for="search-type-3"><!--回復--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="0" id="search-type-0" /><label class="type-icon" data-type-icon="0" for="search-type-0"><!--進化用--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="12" id="search-type-12" /><label class="type-icon" data-type-icon="12" for="search-type-12"><!--能力覺醒用--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="14" id="search-type-14" /><label class="type-icon" data-type-icon="14" for="search-type-14"><!--強化合成用--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="15" id="search-type-15" /><label class="type-icon" data-type-icon="15" for="search-type-15"><!--販賣用--></label></li>
+					<li data-type-icon="4"><input type="checkbox" class="type-check" name="types" value="4" id="search-type-4" /><label class="type-icon" data-type-icon="4" for="search-type-4"><!--龍--></label></li>
+					<li data-type-icon="5"><input type="checkbox" class="type-check" name="types" value="5" id="search-type-5" /><label class="type-icon" data-type-icon="5" for="search-type-5"><!--神--></label></li>
+					<li data-type-icon="7"><input type="checkbox" class="type-check" name="types" value="7" id="search-type-7" /><label class="type-icon" data-type-icon="7" for="search-type-7"><!--惡魔--></label></li>
+					<li data-type-icon="8"><input type="checkbox" class="type-check" name="types" value="8" id="search-type-8" /><label class="type-icon" data-type-icon="8" for="search-type-8"><!--机械--></label></li>
+					<li data-type-icon="1"><input type="checkbox" class="type-check" name="types" value="1" id="search-type-1" /><label class="type-icon" data-type-icon="1" for="search-type-1"><!--平衡--></label></li>
+					<li data-type-icon="6"><input type="checkbox" class="type-check" name="types" value="6" id="search-type-6" /><label class="type-icon" data-type-icon="6" for="search-type-6"><!--攻撃--></label></li>
+					<li data-type-icon="2"><input type="checkbox" class="type-check" name="types" value="2" id="search-type-2" /><label class="type-icon" data-type-icon="2" for="search-type-2"><!--体力--></label></li>
+					<li data-type-icon="3"><input type="checkbox" class="type-check" name="types" value="3" id="search-type-3" /><label class="type-icon" data-type-icon="3" for="search-type-3"><!--回復--></label></li>
+					<li data-type-icon="0"><input type="checkbox" class="type-check" name="types" value="0" id="search-type-0" /><label class="type-icon" data-type-icon="0" for="search-type-0"><!--進化用--></label></li>
+					<li data-type-icon="12"><input type="checkbox" class="type-check" name="types" value="12" id="search-type-12" /><label class="type-icon" data-type-icon="12" for="search-type-12"><!--能力覺醒用--></label></li>
+					<li data-type-icon="14"><input type="checkbox" class="type-check" name="types" value="14" id="search-type-14" /><label class="type-icon" data-type-icon="14" for="search-type-14"><!--強化合成用--></label></li>
+					<li data-type-icon="15"><input type="checkbox" class="type-check" name="types" value="15" id="search-type-15" /><label class="type-icon" data-type-icon="15" for="search-type-15"><!--販賣用--></label></li>
 					<!--<li><input type="checkbox" class="type-check" name="types" value="9" id="search-type-9" /><label class="display-none" data-type-icon="9" for="search-type-9"></label></li>--><!--特别保护-->
 				</ul>
-				<input type="checkbox" class="config-checkbox-ipt" name="type-and-or" id="type-and-or"><label class="config-checkbox-lbl type-and-or-label" for="type-and-or"><div class="config-checkbox-lbl-cicle"></div></label>
+				<input type="checkbox" class="config-checkbox-ipt" name="type-and-or" id="type-and-or" checked><label class="config-checkbox-lbl type-and-or-label" for="type-and-or"><div class="config-checkbox-lbl-cicle"></div></label>
 			</div>
 			<div class="awoken-div"><!--觉醒-->
 				<button class="awoken-clear" ></button>

script.js

@@ -828,8 +828,26 @@ function initialize() {
     const s_attr1s = Array.from(searchBox.querySelectorAll(".attrs .attr-list-1 .attr-radio"));
     const s_attr2s = Array.from(searchBox.querySelectorAll(".attrs .attr-list-2 .attr-radio"));
     const s_fixMainColor = searchBox.querySelector("#fix-main-color");
-    const s_types = Array.from(searchBox.querySelectorAll(".types-div .type-check"));
-    const s_typeAndOr = searchBox.querySelector("#type-and-or");
+    const s_typesDiv = searchBox.querySelector(".types-div");
+    const s_types = Array.from(s_typesDiv.querySelectorAll(".type-check"));
+    const s_typeAndOr = s_typesDiv.querySelector("#type-and-or");
+    const s_typesUl = s_typesDiv.querySelector(".type-list");
+    const s_typesLi = Array.from(s_typesUl.querySelectorAll("li"));
+    const s_typesCheckBox = s_typesLi.map(li=>li.querySelector(".type-check"));
+    s_typesCheckBox.forEach(checkBox=>
+        checkBox.onchange = function(){
+            const newClassName = `type-killer-${this.value}`;
+            if (this.checked && s_typeAndOr.checked)
+                s_typesUl.classList.add(newClassName);
+            else
+                s_typesUl.classList.remove(newClassName);
+        }
+    );
+    s_typeAndOr.onchange = function(){
+        s_typesCheckBox.forEach(checkBox=>checkBox.onchange());
+    };
+    s_typeAndOr.onchange();
+
     const s_awokensItems = Array.from(searchBox.querySelectorAll(".awoken-div .awoken-count"));
     const s_awokensIcons = s_awokensItems.map(it => it.querySelector(".awoken-icon"));
     const s_awokensCounts = s_awokensItems.map(it => it.querySelector(".count"));

solo.html

@@ -422,21 +422,21 @@ var formation = new Formation(teamsCount,6);
 			</div>
 			<div class="types-div"><!--类型-->
 				<ul class="type-list">
-					<li><input type="checkbox" class="type-check" name="types" value="4" id="search-type-4" /><label class="type-icon" data-type-icon="4" for="search-type-4"><!--龍--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="5" id="search-type-5" /><label class="type-icon" data-type-icon="5" for="search-type-5"><!--神--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="7" id="search-type-7" /><label class="type-icon" data-type-icon="7" for="search-type-7"><!--惡魔--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="8" id="search-type-8" /><label class="type-icon" data-type-icon="8" for="search-type-8"><!--机械--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="1" id="search-type-1" /><label class="type-icon" data-type-icon="1" for="search-type-1"><!--平衡--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="6" id="search-type-6" /><label class="type-icon" data-type-icon="6" for="search-type-6"><!--攻撃--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="2" id="search-type-2" /><label class="type-icon" data-type-icon="2" for="search-type-2"><!--体力--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="3" id="search-type-3" /><label class="type-icon" data-type-icon="3" for="search-type-3"><!--回復--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="0" id="search-type-0" /><label class="type-icon" data-type-icon="0" for="search-type-0"><!--進化用--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="12" id="search-type-12" /><label class="type-icon" data-type-icon="12" for="search-type-12"><!--能力覺醒用--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="14" id="search-type-14" /><label class="type-icon" data-type-icon="14" for="search-type-14"><!--強化合成用--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="15" id="search-type-15" /><label class="type-icon" data-type-icon="15" for="search-type-15"><!--販賣用--></label></li>
+					<li data-type-icon="4"><input type="checkbox" class="type-check" name="types" value="4" id="search-type-4" /><label class="type-icon" data-type-icon="4" for="search-type-4"><!--龍--></label></li>
+					<li data-type-icon="5"><input type="checkbox" class="type-check" name="types" value="5" id="search-type-5" /><label class="type-icon" data-type-icon="5" for="search-type-5"><!--神--></label></li>
+					<li data-type-icon="7"><input type="checkbox" class="type-check" name="types" value="7" id="search-type-7" /><label class="type-icon" data-type-icon="7" for="search-type-7"><!--惡魔--></label></li>
+					<li data-type-icon="8"><input type="checkbox" class="type-check" name="types" value="8" id="search-type-8" /><label class="type-icon" data-type-icon="8" for="search-type-8"><!--机械--></label></li>
+					<li data-type-icon="1"><input type="checkbox" class="type-check" name="types" value="1" id="search-type-1" /><label class="type-icon" data-type-icon="1" for="search-type-1"><!--平衡--></label></li>
+					<li data-type-icon="6"><input type="checkbox" class="type-check" name="types" value="6" id="search-type-6" /><label class="type-icon" data-type-icon="6" for="search-type-6"><!--攻撃--></label></li>
+					<li data-type-icon="2"><input type="checkbox" class="type-check" name="types" value="2" id="search-type-2" /><label class="type-icon" data-type-icon="2" for="search-type-2"><!--体力--></label></li>
+					<li data-type-icon="3"><input type="checkbox" class="type-check" name="types" value="3" id="search-type-3" /><label class="type-icon" data-type-icon="3" for="search-type-3"><!--回復--></label></li>
+					<li data-type-icon="0"><input type="checkbox" class="type-check" name="types" value="0" id="search-type-0" /><label class="type-icon" data-type-icon="0" for="search-type-0"><!--進化用--></label></li>
+					<li data-type-icon="12"><input type="checkbox" class="type-check" name="types" value="12" id="search-type-12" /><label class="type-icon" data-type-icon="12" for="search-type-12"><!--能力覺醒用--></label></li>
+					<li data-type-icon="14"><input type="checkbox" class="type-check" name="types" value="14" id="search-type-14" /><label class="type-icon" data-type-icon="14" for="search-type-14"><!--強化合成用--></label></li>
+					<li data-type-icon="15"><input type="checkbox" class="type-check" name="types" value="15" id="search-type-15" /><label class="type-icon" data-type-icon="15" for="search-type-15"><!--販賣用--></label></li>
 					<!--<li><input type="checkbox" class="type-check" name="types" value="9" id="search-type-9" /><label class="display-none" data-type-icon="9" for="search-type-9"></label></li>--><!--特别保护-->
 				</ul>
-				<input type="checkbox" class="config-checkbox-ipt" name="type-and-or" id="type-and-or"><label class="config-checkbox-lbl type-and-or-label" for="type-and-or"><div class="config-checkbox-lbl-cicle"></div></label>
+				<input type="checkbox" class="config-checkbox-ipt" name="type-and-or" id="type-and-or" checked><label class="config-checkbox-lbl type-and-or-label" for="type-and-or"><div class="config-checkbox-lbl-cicle"></div></label>
 			</div>
 			<div class="awoken-div"><!--觉醒-->
 				<button class="awoken-clear" ></button>

style.css

@@ -952,6 +952,43 @@ ul{
 	margin-left: 10px;
 	margin-right: 0;
 }
+.types-div .type-list li
+{
+	position: relative;
+}
+.types-div .type-list li:after
+{
+	content: "⚔️";
+	font-size: 10px;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	display: none;
+	pointer-events:none;
+}
+.types-div .type-list.type-killer-5 li[data-type-icon="7"]:after,
+.types-div .type-list.type-killer-4 li[data-type-icon="8"]:after,
+.types-div .type-list.type-killer-4 li[data-type-icon="3"]:after,
+.types-div .type-list.type-killer-7 li[data-type-icon="5"]:after,
+.types-div .type-list.type-killer-8 li[data-type-icon="5"]:after,
+.types-div .type-list.type-killer-8 li[data-type-icon="1"]:after,
+.types-div .type-list.type-killer-1 li[data-type-icon="5"]:after,
+.types-div .type-list.type-killer-1 li[data-type-icon="4"]:after,
+.types-div .type-list.type-killer-1 li[data-type-icon="7"]:after,
+.types-div .type-list.type-killer-1 li[data-type-icon="8"]:after,
+.types-div .type-list.type-killer-1 li[data-type-icon="1"]:after,
+.types-div .type-list.type-killer-1 li[data-type-icon="6"]:after,
+.types-div .type-list.type-killer-1 li[data-type-icon="2"]:after,
+.types-div .type-list.type-killer-1 li[data-type-icon="3"]:after,
+.types-div .type-list.type-killer-6 li[data-type-icon="7"]:after,
+.types-div .type-list.type-killer-6 li[data-type-icon="2"]:after,
+.types-div .type-list.type-killer-2 li[data-type-icon="8"]:after,
+.types-div .type-list.type-killer-2 li[data-type-icon="3"]:after,
+.types-div .type-list.type-killer-3 li[data-type-icon="4"]:after,
+.types-div .type-list.type-killer-3 li[data-type-icon="6"]:after
+{
+	display: block;
+}
 /*.search-box .awoken-div::before{
 	content: "觉醒";
 }*/

triple.html

@@ -1117,21 +1117,21 @@ var formation = new Formation(teamsCount,6);
 			</div>
 			<div class="types-div"><!--类型-->
 				<ul class="type-list">
-					<li><input type="checkbox" class="type-check" name="types" value="4" id="search-type-4" /><label class="type-icon" data-type-icon="4" for="search-type-4"><!--龍--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="5" id="search-type-5" /><label class="type-icon" data-type-icon="5" for="search-type-5"><!--神--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="7" id="search-type-7" /><label class="type-icon" data-type-icon="7" for="search-type-7"><!--惡魔--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="8" id="search-type-8" /><label class="type-icon" data-type-icon="8" for="search-type-8"><!--机械--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="1" id="search-type-1" /><label class="type-icon" data-type-icon="1" for="search-type-1"><!--平衡--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="6" id="search-type-6" /><label class="type-icon" data-type-icon="6" for="search-type-6"><!--攻撃--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="2" id="search-type-2" /><label class="type-icon" data-type-icon="2" for="search-type-2"><!--体力--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="3" id="search-type-3" /><label class="type-icon" data-type-icon="3" for="search-type-3"><!--回復--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="0" id="search-type-0" /><label class="type-icon" data-type-icon="0" for="search-type-0"><!--進化用--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="12" id="search-type-12" /><label class="type-icon" data-type-icon="12" for="search-type-12"><!--能力覺醒用--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="14" id="search-type-14" /><label class="type-icon" data-type-icon="14" for="search-type-14"><!--強化合成用--></label></li>
-					<li><input type="checkbox" class="type-check" name="types" value="15" id="search-type-15" /><label class="type-icon" data-type-icon="15" for="search-type-15"><!--販賣用--></label></li>
+					<li data-type-icon="4"><input type="checkbox" class="type-check" name="types" value="4" id="search-type-4" /><label class="type-icon" data-type-icon="4" for="search-type-4"><!--龍--></label></li>
+					<li data-type-icon="5"><input type="checkbox" class="type-check" name="types" value="5" id="search-type-5" /><label class="type-icon" data-type-icon="5" for="search-type-5"><!--神--></label></li>
+					<li data-type-icon="7"><input type="checkbox" class="type-check" name="types" value="7" id="search-type-7" /><label class="type-icon" data-type-icon="7" for="search-type-7"><!--惡魔--></label></li>
+					<li data-type-icon="8"><input type="checkbox" class="type-check" name="types" value="8" id="search-type-8" /><label class="type-icon" data-type-icon="8" for="search-type-8"><!--机械--></label></li>
+					<li data-type-icon="1"><input type="checkbox" class="type-check" name="types" value="1" id="search-type-1" /><label class="type-icon" data-type-icon="1" for="search-type-1"><!--平衡--></label></li>
+					<li data-type-icon="6"><input type="checkbox" class="type-check" name="types" value="6" id="search-type-6" /><label class="type-icon" data-type-icon="6" for="search-type-6"><!--攻撃--></label></li>
+					<li data-type-icon="2"><input type="checkbox" class="type-check" name="types" value="2" id="search-type-2" /><label class="type-icon" data-type-icon="2" for="search-type-2"><!--体力--></label></li>
+					<li data-type-icon="3"><input type="checkbox" class="type-check" name="types" value="3" id="search-type-3" /><label class="type-icon" data-type-icon="3" for="search-type-3"><!--回復--></label></li>
+					<li data-type-icon="0"><input type="checkbox" class="type-check" name="types" value="0" id="search-type-0" /><label class="type-icon" data-type-icon="0" for="search-type-0"><!--進化用--></label></li>
+					<li data-type-icon="12"><input type="checkbox" class="type-check" name="types" value="12" id="search-type-12" /><label class="type-icon" data-type-icon="12" for="search-type-12"><!--能力覺醒用--></label></li>
+					<li data-type-icon="14"><input type="checkbox" class="type-check" name="types" value="14" id="search-type-14" /><label class="type-icon" data-type-icon="14" for="search-type-14"><!--強化合成用--></label></li>
+					<li data-type-icon="15"><input type="checkbox" class="type-check" name="types" value="15" id="search-type-15" /><label class="type-icon" data-type-icon="15" for="search-type-15"><!--販賣用--></label></li>
 					<!--<li><input type="checkbox" class="type-check" name="types" value="9" id="search-type-9" /><label class="display-none" data-type-icon="9" for="search-type-9"></label></li>--><!--特别保护-->
 				</ul>
-				<input type="checkbox" class="config-checkbox-ipt" name="type-and-or" id="type-and-or"><label class="config-checkbox-lbl type-and-or-label" for="type-and-or"><div class="config-checkbox-lbl-cicle"></div></label>
+				<input type="checkbox" class="config-checkbox-ipt" name="type-and-or" id="type-and-or" checked><label class="config-checkbox-lbl type-and-or-label" for="type-and-or"><div class="config-checkbox-lbl-cicle"></div></label>
 			</div>
 			<div class="awoken-div"><!--觉醒-->
 				<button class="awoken-clear" ></button>