我做了一个很简单的用于筛选的html，我感觉逻辑没有问题，但是当我选择“庚—辛”时却只筛选出了“庚↔辛”，而过滤掉了本身，“壬—癸”也一样
GitHub
Contribute to Ckarefulon/Ckarefulon.github.io development by creating an account on GitHub.
https://github.com/Ckarefulon/Ckarefulon.github.io/blob/main/Cube/ZBLL/T/index.html
网站
https://ckarefulon.github.io/Cube/ZBLL/T/
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZBLL</title>
<link rel="icon" type="image/png" href="../../../Favicon.png">
<style>
body {
background-color: #5d4ea8;
margin: 0;
padding: 20px;
}
select option:hover {
background-color: #5d4ea8;
}
h1{
color: #24f0ea;
text-shadow: 10px 10px 17px #55367a;
}
p{
margin: 0;
}
select {
padding: 10px;
margin-right: 10px;
border: 3px solid #24f0ea;
border-radius: 13px;
background-color: #a0a2de;
color: #55367a;
text-align: center;
margin-top: 7px;
box-shadow: 10px 10px 17px;
}
div{
background-color: #5d4ea8;
border: 3px solid #24f0ea;
padding: 10px;
margin-top: 10px;
border-radius: 17px;
color: #55367a;
box-shadow: 10px 10px 17px;
}
iframe {
border: none;
}
.Top{
background-color: #5d4ea8;
border: 3px solid #24f0ea;
padding: 10px;
color: #24f0ea;
box-shadow: 0px 17px 25px #55367a;
margin: 0;
position: fixed;
right: 0px;
left: 0px;
top: 0px;
border-radius: 0px 0px 17px 17px;
z-index: 999
}
.None{
all: revert;
float: right;
}
#content-list {
list-style: none;
padding: 0;
}
#content-list li {
background-color: #a0a2de;
border: 3px solid #24f0ea;
padding: 10px;
margin-top: 10px;
border-radius: 13px;
color: #55367a;
box-shadow: 10px 10px 17px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const selects = document.querySelectorAll('select');
const contentList = document.getElementById('content-list');
function filterContent() {
const filterA = selects[0].value;
const filterB = selects[1].value;
const filterC = selects[2].value;
const filterD = selects[3].value;
contentList.innerHTML = '';
const items = [
{ text: "T01", attrs: ["壹=乙=贰", "丁=戊=己", "庚=辛", "壬=癸"] },
{ text: "T12", attrs: ["壹=乙=贰", "丁=己", "庚↔辛", "壬—癸"] },
{ text: "T06", attrs: ["壹=乙=贰", "丁=己", "庚—辛", "壬↔癸"] },
{ text: "T02", attrs: ["壹=贰", "丁=戊=己", "庚↔辛", "壬—癸"] },
{ text: "T03", attrs: ["壹=贰", "丁=戊=己", "庚—辛", "壬↔癸"] },
{ text: "T09", attrs: ["壹=贰", "丁↔戊↔己", "庚=辛", "壬—癸"] },
{ text: "T08", attrs: ["壹=贰", "丁↔戊↔己", "庚—辛", "壬=癸"] },
{ text: "T??", attrs: ["壹=贰", "丁↔戊↔己", "庚↔辛", "壬↔癸"] }
];
items.forEach(item => {
if ((filterA === '' || item.attrs[0] === filterA) &&
(filterB === '' || item.attrs[1] === filterB) &&
(filterC === '' || item.attrs[2] === filterC) &&
(filterD === '' || item.attrs[3] === filterD)) {
const li = document.createElement('li');
li.textContent = `"${item.text}"，特征：${item.attrs.join(', ')}`;
contentList.appendChild(li);
}
});
}
selects.forEach(select => {
select.addEventListener('change', filterContent);
});
filterContent();
});
</script>
</head>
<body>
<br/>
<div class="Top">
<div style="float: left;" class="None">Ckarefulon</div>
<div class="None">Ckareful S.</div>
<div class="None"><img style="width: 20px;height: 20px" src="../../../Favicon.png"></div>
<div style="margin-right: 7px;"class="None">by</div>
</div>
<div style="
width: 267px;
position: fixed;
right: 20px;
margin-top: 30px;
z-index: 997
">
<iframe src="Cube.svg" width="267" height="267"></iframe>
</div>
<h1>选择特征</h1>
<select>
<option value="">【壹乙贰】</option>
<option value="壹=贰">壹=贰</option>
<option value="壹↔贰">壹↔贰</option>
<option value="壹=乙=贰">壹=乙=贰</option>
<option value="壹↔乙↔贰">壹↔乙↔贰</option>
</select>
<select>
<option value="">【丁戊己】</option>
<option value="丁=己">丁=己</option>
<option value="丁↔己">丁↔己</option>
<option value="丁=戊=己">丁=戊=己</option>
<option value="丁↔戊↔己">丁↔戊↔己</option>
</select>
<select>
<option value="">【庚辛】</option>
<option value="庚=辛">庚=辛</option>
<option value="庚↔辛">庚↔辛</option>
<option value="庚↔辛">庚—辛</option>
</select>
<select>
<option value="">【壬癸】</option>
<option value="壬=癸">壬=癸</option>
<option value="壬↔癸">壬↔癸</option>
<option value="壬↔癸">壬—癸</option>
</select>
<h1>公式</h1>
<ul id="content-list"></ul>
</body>
</html>
非常感谢您的回复！
