我的网站设计出来很好,但脚本没有执行。我找不到问题所在,试着检查我的代码,但仍然一无所获。你能帮帮我吗?我最后的手段都没有奏效,但当我检查来源时,它起作用了,所以我不知道我做错了什么。我尝试删除和添加一些元素,但由于某种原因,隐藏元素根本不起作用,所以我没有其他方法,只能在这里寻求建议。
代码如下:
let schools = {
data: [{
schoolName: "Edmonton Catholic School District",
category: "Catholic",
image: "ecsd.png"
},
{
schoolName: "Edmonton Public School",
category: "Regular",
image: "publicimg.jpg"
},
{
schoolName: "Northern Alberta Institution of Technology",
category: "College",
image: "NAIT.png"
},
{
schoolName: "University of Alberta",
category: "University",
image: "University-of-Alberta.png"
},
],
};
for (let i of schools.data) {
//Create Card
let card = document.createElement("div");
//Card category and should be hidden
card.classList.add("card", i.category, "hide");
//Image div
let imgContainer = document.createElement("div");
imgContainer.classList.add("image-container");
//img tag
let image = document.createElement("img");
image.setAttribute("src", i.image);
imgContainer.appendChild(image);
card.appendChild(imgContainer);
//container
let container = document.createElement("div");
container.classList.add("container");
//School name
let name = document.createElement("h5");
name.classList.add("school-name");
name.innerText = i.schoolName.toUpperCase();
container.appendChild(name);
card.appendChild(container);
document.getElementById("schools").appendChild(card);
}
function filterSchool(value) {
let elements = document.querySelectorAll(".card");
elements.forEach((element) => {
if (value == "all") {
element.classList.remove("hide");
} else {
if (element.classList.contains(value)) {
element.classList.remove("hide");
} else {
element.classList.add("hide");
}
}
});
}
window.onload = () => {
filterSchool("all");
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
outline: none;
font-family: 'Poppins', sans-serif;
}
body {
background-color: white;
}
button {
cursor: pointer;
}
.wrapper {
position: absolute;
top: 5%;
left: 20%;
width: 95%;
margin: 0 auto;
}
.button-value {
border: 2px solid black;
padding: 0.5px 10px;
border-radius: 3em;
background-color: transparent;
transition: 0.3s ease-in-out;
}
.button-value:focus {
background-color: black;
color: white;
}
#schools {
display: grid;
grid-template-columns: auto auto auto;
grid-column-gap: 1.5em;
padding: 2em 0;
}
.card {
background-color: white;
max-width: 18em;
margin-top: 1em;
padding: 1em;
border-radius: 5px;
box-shadow: 1em 2em 2.5em rgba(0, 0, 0, 0.19);
}
.image-container {
text-align: center;
}
img {
max-width: 100%;
object-fit: contain;
height: 15em;
}
.container {
padding-top: 1em;
color: black;
}
@media screen and (max-width: 720px) {
img {
max-width: 100%;
object-fit: contain;
height: 10em;
}
.card {
max-width: 10em;
margin-top: 1em;
}
#schools {
grid-template-columns: auto auto;
grid-column-gap: 1em;
}
}
<div class="wrapper">
<div id="buttons">
<button class="button-value" onclick="filterSchool('all')">All</button>
<button class="button-value" onclick="filterSchool('Catholic')">Catholic School</button>
<button class="button-value" onclick="filterSchool('Regular')">Regular School</button>
<button class="button-value" onclick="filterSchool('University')">University</button>
<button class="button-value" onclick="filterSchool('College')">College</button>
</div>
<div id="schools"></div>
</div>
2条答案
按热度按时间q0qdq0h21#
filter函数将一个名为
hide
的类添加到每个不满足选择条件的卡。问题是你还没有定义这个类做什么。如果加上.hide { display: none; }
到你的CSS它会工作。下面的工作示例使用“学院”作为过滤器。
ezykj2lf2#
错误是
它显示的原因是因为
windows
不是正确的函数是window