英文:
Don't load HTML template on first load
问题
以下是您要翻译的内容：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
<title>Document</title>
</head>
<body>
<div class="search-wrapper">
<input type="search" id="search" placeholder="Search the catalogue" data-search>
</div>
<div class="user-cards" data-user-cards-container></div>
<template data-user-template>
<div class="card">
<a href="https://www.url.com/#">
<div class="header" data-header></div>
</a>
<div class="body" data-body></div>
</div>
</template>
</body>
JavaScript
const userCardTemplate = document.querySelector("[data-user-template]")
const userCardContainer = document.querySelector("[data-user-cards-container]")
const searchInput = document.querySelector("[data-search]")
let users = []
searchInput.addEventListener("input", e => {
const value = e.target.value.toLowerCase()
const xy = value.split(' ')
users.forEach(user => {
if (parseFloat(value.length) < 3) {
user.element.classList.toggle("hide", true)
} else {
var distance = Math.sqrt(
Math.pow(parseFloat(xy[0]) - parseFloat(user.x), 2) +
Math.pow(parseFloat(xy[1]) - parseFloat(user.y), 2))
const isVisible =
user.name.toLowerCase().includes(value) || distance <= 10
user.element.classList.toggle("hide", !isVisible)
}
})
})
fetch("https://ucc.ar/_clusters/test.json")
.then(res => res.json())
.then(data => {
users = data.map(user => {
const card = userCardTemplate.content.cloneNode(true).children[0]
const header = card.querySelector("[data-header]")
const body = card.querySelector("[data-body]")
header.textContent = user.name
body.textContent = user.company
userCardContainer.append(card)
return {
name: user.name,
x: user.x,
y: user.y,
element: card
}
})
})
CSS
.search-wrapper {
display: flex;
flex-direction: column;
gap: .25rem;
}
input {
width: 80%;
margin: 0 auto;
display: block;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
background-color: #ffffff;
}
.user-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: .25rem;
margin-top: 1rem;
}
.card {
border: 1px solid black;
background-color: white;
padding: .5rem;
text-align: center;
}
.card > .header {
margin-bottom: .25rem;
}
.card > .body {
font-size: .8rem;
color: #777;
font-weight: bold;
}
.hide {
display: none;
}
请告诉我，您是否需要任何其他帮助。
英文:
I have a basic HTML template that is populated by cards through a search bar given some conditions. This works fine, the only problem is that on first load all the cards are shown and I want none shown until the conditions are met.
This is my code: https://jsfiddle.net/barkwegn/6/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
<title>Document</title>
</head>
<body>
<div class="search-wrapper">
<input type="search" id="search" placeholder="Search the catalogue" data-search>
</div>
<div class="user-cards" data-user-cards-container></div>
<template data-user-template>
<div class="card">
<a href="https://www.url.com/#">
<div class="header" data-header></div>
</a>
<div class="body" data-body></div>
</div>
</template>
</body>
Javascript
const userCardTemplate = document.querySelector("[data-user-template]")
const userCardContainer = document.querySelector("[data-user-cards-container]")
const searchInput = document.querySelector("[data-search]")
let users = []
searchInput.addEventListener("input", e => {
const value = e.target.value.toLowerCase()
const xy = value.split(' ')
users.forEach(user => {
if (parseFloat(value.length) < 3) {
user.element.classList.toggle("hide", true)
} else {
var distance = Math.sqrt(
Math.pow(parseFloat(xy[0]) - parseFloat(user.x), 2) +
Math.pow(parseFloat(xy[1]) - parseFloat(user.y), 2))
const isVisible =
user.name.toLowerCase().includes(value) || distance <= 10
user.element.classList.toggle("hide", !isVisible)
}
})
})
fetch("https://ucc.ar/_clusters/test.json")
.then(res => res.json())
.then(data => {
users = data.map(user => {
const card = userCardTemplate.content.cloneNode(true).children[0]
const header = card.querySelector("[data-header]")
const body = card.querySelector("[data-body]")
header.textContent = user.name
body.textContent = user.company
userCardContainer.append(card)
return {
name: user.name,
x: user.x,
y: user.y,
element: card
}
})
})
CSS
.search-wrapper {
display: flex;
flex-direction: column;
gap: .25rem;
}
input {
width: 80%;
margin: 0 auto;
display: block;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
background-color: #ffffff;
}
.user-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: .25rem;
margin-top: 1rem;
}
.card {
border: 1px solid black;
background-color: white;
padding: .5rem;
text-align: center;
}
.card > .header {
margin-bottom: .25rem;
}
.card > .body {
font-size: .8rem;
color: #777;
font-weight: bold;
}
.hide {
display: none;
}
答案1
得分: 1
在初始的fetch中创建元素时，将hide类添加到这些元素。
const card = userCardTemplate.content.cloneNode(true).children[0]
const header = card.querySelector("[data-header]")
const body = card.querySelector("[data-body]")
header.textContent = user.name
body.textContent = user.company
card.classList.add('hide');
你也可以直接在模板中将其添加到卡片。
英文:
Add the hide class to the elements when creating them in the initial fetch.
const card = userCardTemplate.content.cloneNode(true).children[0]
const header = card.querySelector("[data-header]")
const body = card.querySelector("[data-body]")
header.textContent = user.name
body.textContent = user.company
card.classList.add('hide');
You could also directly add it to the card in the template.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论