改为点第三个点的时候去除前两个点

multi.html

@@ -499,18 +499,18 @@ var formation = new Formation(teamsCount,5);
 				</ul>
 			</div>
 			<div class="rare-div"><!--稀有星级-->
-				<ul class="rare-list">
-					<li><input type="checkbox" class="rare-check" name="rare" value="1" id="search-rare-1" /><label class="rare-icon" data-rare-icon="1" for="search-rare-1"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="2" id="search-rare-2" /><label class="rare-icon" data-rare-icon="2" for="search-rare-2"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="3" id="search-rare-3" /><label class="rare-icon" data-rare-icon="3" for="search-rare-3"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="4" id="search-rare-4" /><label class="rare-icon" data-rare-icon="4" for="search-rare-4"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="5" id="search-rare-5" /><label class="rare-icon" data-rare-icon="5" for="search-rare-5"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="6" id="search-rare-6" /><label class="rare-icon" data-rare-icon="6" for="search-rare-6"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="7" id="search-rare-7" /><label class="rare-icon" data-rare-icon="7" for="search-rare-7"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="8" id="search-rare-8" /><label class="rare-icon" data-rare-icon="8" for="search-rare-8"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="9" id="search-rare-9" /><label class="rare-icon" data-rare-icon="9" for="search-rare-9"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="10" id="search-rare-10" /><label class="rare-icon" data-rare-icon="10" for="search-rare-10"></label></li>
-				</ul>
+				<div class="rare-list">
+					<input type="radio" class="rare-radio" name="rare-low" value="1" checked/><div class="rare-icon" data-rare-icon="1"></div><input type="radio" class="rare-radio" name="rare-high" value="1" />
+					<input type="radio" class="rare-radio" name="rare-low" value="2" /><div class="rare-icon" data-rare-icon="2"></div><input type="radio" class="rare-radio" name="rare-high" value="2" />
+					<input type="radio" class="rare-radio" name="rare-low" value="3" /><div class="rare-icon" data-rare-icon="3"></div><input type="radio" class="rare-radio" name="rare-high" value="3" />
+					<input type="radio" class="rare-radio" name="rare-low" value="4" /><div class="rare-icon" data-rare-icon="4"></div><input type="radio" class="rare-radio" name="rare-high" value="4" />
+					<input type="radio" class="rare-radio" name="rare-low" value="5" /><div class="rare-icon" data-rare-icon="5"></div><input type="radio" class="rare-radio" name="rare-high" value="5" />
+					<input type="radio" class="rare-radio" name="rare-low" value="6" /><div class="rare-icon" data-rare-icon="6"></div><input type="radio" class="rare-radio" name="rare-high" value="6" />
+					<input type="radio" class="rare-radio" name="rare-low" value="7" /><div class="rare-icon" data-rare-icon="7"></div><input type="radio" class="rare-radio" name="rare-high" value="7" />
+					<input type="radio" class="rare-radio" name="rare-low" value="8" /><div class="rare-icon" data-rare-icon="8"></div><input type="radio" class="rare-radio" name="rare-high" value="8" />
+					<input type="radio" class="rare-radio" name="rare-low" value="9" /><div class="rare-icon" data-rare-icon="9"></div><input type="radio" class="rare-radio" name="rare-high" value="9" />
+					<input type="radio" class="rare-radio" name="rare-low" value="10" /><div class="rare-icon" data-rare-icon="10"></div><input type="radio" class="rare-radio" name="rare-high" value="10" checked/>
+				</div>
 			</div>
 			<div class="awoken-div"><!--觉醒-->
 				<button class="awoken-clear"></button>

script-universal_function.js

@@ -426,9 +426,9 @@ function searchCards(cards,attr1,attr2,fixMainColor,types,typeAndOr,rares,awoken
 			);
 	}
 	//稀有度
-	if (rares.length>0)
+	if (rares.length>1)
 	{
-		cardsRange = cardsRange.filter(c=>rares.includes(c.rarity));
+		cardsRange = cardsRange.filter(c=>c.rarity >= rares[0] && c.rarity <= rares[1]);
 	}
 	//觉醒
 	//等效觉醒时，事先去除大觉醒

script.js

@@ -1131,16 +1131,25 @@ function initialize() {
 	//稀有度筛选
 	const s_rareDiv = searchBox.querySelector(".rare-div");
 	const s_rareLst = s_rareDiv.querySelector(".rare-list");
-	const s_rareIcons = Array.from(s_rareLst.querySelectorAll("rare-icon"));
+	const s_rareIcons = Array.from(s_rareLst.querySelectorAll(".rare-icon"));
+	const s_rareLows = Array.from(s_rareLst.querySelectorAll("input[name='rare-low']"));
+	const s_rareHighs = Array.from(s_rareLst.querySelectorAll("input[name='rare-high']"));
 	function s_rareIcons_onclick()
 	{
 		const thisValue = parseInt(this.getAttribute("data-rare-icon"),10);
-		const radioLow = s_rareLst.querySelector("input[name='rare-low']:checked");
-		const radioHigh = s_rareLst.querySelector("input[name='rare-high']:checked");
-		const range = [
-			radioLow ? parseInt(radioLow.value,10) : 1,
-			radioHigh ? parseInt(radioHigh.value,10) : 10
-		];
+		const radioLow = s_rareLows.find(radio=>radio.checked);
+		const radioHigh = s_rareHighs.find(radio=>radio.checked);
+		const rangeLow = radioLow ? parseInt(radioLow.value,10) : 1;
+		const rangeHigh = radioHigh ? parseInt(radioHigh.value,10) : 10;
+		if (rangeLow == rangeHigh)
+		{
+			s_rareLows.find(radio=>parseInt(radio.value,10) == Math.min(thisValue,rangeLow)).checked = true;
+			s_rareHighs.find(radio=>parseInt(radio.value,10) == Math.max(thisValue,rangeLow)).checked = true;
+		}else
+		{
+			s_rareLows.find(radio=>parseInt(radio.value,10) == thisValue).checked = true;
+			s_rareHighs.find(radio=>parseInt(radio.value,10) == thisValue).checked = true;
+		}
 	}
 	s_rareIcons.forEach(icon=>icon.onclick = s_rareIcons_onclick);
 
@@ -1301,7 +1310,10 @@ function initialize() {
 			}
 		}
 		const typesFilter = s_types.filter(returnCheckedInput).map(returnInputValue).map(Str2Int);
-		//const rareFilter = s_rare.filter(returnCheckedInput).map(returnInputValue).map(Str2Int);
+		const rareFilter = [
+			s_rareLows.filter(returnCheckedInput).map(returnInputValue).map(Str2Int)[0],
+			s_rareHighs.filter(returnCheckedInput).map(returnInputValue).map(Str2Int)[0],
+		];
 		const sawokensFilter = s_sawokens.filter(returnCheckedInput).map(returnInputValue).map(Str2Int);
 		const awokensFilter = s_awokensCounts.filter(btn => parseInt(btn.value, 10) > 0).map(btn => {
 			const awokenIndex = parseInt(btn.parentNode.parentNode.querySelector(".awoken-icon").getAttribute("data-awoken-icon"), 10);
@@ -1312,7 +1324,7 @@ function initialize() {
 			s_fixMainColor.checked,
 			typesFilter,
 			s_typeAndOr.checked,
-			[],//rareFilter,
+			rareFilter,
 			awokensFilter,
 			sawokensFilter,
 			s_awokensEquivalent.checked,

style.css

@@ -1076,6 +1076,11 @@ ul{
 	position: relative;
 	text-align: center;
 	display: inline-block;
+	cursor: pointer;
+}
+.rare-radio
+{
+	display: none;
 }
 .rare-radio[name="rare-low"]+.rare-icon
 {

triple.html

@@ -1144,18 +1144,18 @@ var formation = new Formation(teamsCount,6);
 				</ul>
 			</div>
 			<div class="rare-div"><!--稀有星级-->
-				<ul class="rare-list">
-					<li><input type="checkbox" class="rare-check" name="rare" value="1" id="search-rare-1" /><label class="rare-icon" data-rare-icon="1" for="search-rare-1"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="2" id="search-rare-2" /><label class="rare-icon" data-rare-icon="2" for="search-rare-2"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="3" id="search-rare-3" /><label class="rare-icon" data-rare-icon="3" for="search-rare-3"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="4" id="search-rare-4" /><label class="rare-icon" data-rare-icon="4" for="search-rare-4"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="5" id="search-rare-5" /><label class="rare-icon" data-rare-icon="5" for="search-rare-5"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="6" id="search-rare-6" /><label class="rare-icon" data-rare-icon="6" for="search-rare-6"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="7" id="search-rare-7" /><label class="rare-icon" data-rare-icon="7" for="search-rare-7"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="8" id="search-rare-8" /><label class="rare-icon" data-rare-icon="8" for="search-rare-8"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="9" id="search-rare-9" /><label class="rare-icon" data-rare-icon="9" for="search-rare-9"></label></li>
-					<li><input type="checkbox" class="rare-check" name="rare" value="10" id="search-rare-10" /><label class="rare-icon" data-rare-icon="10" for="search-rare-10"></label></li>
-				</ul>
+				<div class="rare-list">
+					<input type="radio" class="rare-radio" name="rare-low" value="1" checked/><div class="rare-icon" data-rare-icon="1"></div><input type="radio" class="rare-radio" name="rare-high" value="1" />
+					<input type="radio" class="rare-radio" name="rare-low" value="2" /><div class="rare-icon" data-rare-icon="2"></div><input type="radio" class="rare-radio" name="rare-high" value="2" />
+					<input type="radio" class="rare-radio" name="rare-low" value="3" /><div class="rare-icon" data-rare-icon="3"></div><input type="radio" class="rare-radio" name="rare-high" value="3" />
+					<input type="radio" class="rare-radio" name="rare-low" value="4" /><div class="rare-icon" data-rare-icon="4"></div><input type="radio" class="rare-radio" name="rare-high" value="4" />
+					<input type="radio" class="rare-radio" name="rare-low" value="5" /><div class="rare-icon" data-rare-icon="5"></div><input type="radio" class="rare-radio" name="rare-high" value="5" />
+					<input type="radio" class="rare-radio" name="rare-low" value="6" /><div class="rare-icon" data-rare-icon="6"></div><input type="radio" class="rare-radio" name="rare-high" value="6" />
+					<input type="radio" class="rare-radio" name="rare-low" value="7" /><div class="rare-icon" data-rare-icon="7"></div><input type="radio" class="rare-radio" name="rare-high" value="7" />
+					<input type="radio" class="rare-radio" name="rare-low" value="8" /><div class="rare-icon" data-rare-icon="8"></div><input type="radio" class="rare-radio" name="rare-high" value="8" />
+					<input type="radio" class="rare-radio" name="rare-low" value="9" /><div class="rare-icon" data-rare-icon="9"></div><input type="radio" class="rare-radio" name="rare-high" value="9" />
+					<input type="radio" class="rare-radio" name="rare-low" value="10" /><div class="rare-icon" data-rare-icon="10"></div><input type="radio" class="rare-radio" name="rare-high" value="10" checked/>
+				</div>
 			</div>
 			<div class="awoken-div"><!--觉醒-->
 				<button class="awoken-clear"></button>