英文:
Generate URL using entry from JSON search result
问题
以下是翻译好的部分代码：
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;
card.classList.add('hide');
userCardContainer.append(card);
return {
name: user.name,
x: user.x,
y: user.y,
element: card
}
})
})
希望这对你有所帮助！
英文:
The simple HTML template below is populated by cards through a JavaScript search bar. Right now all the cards show the same fixed url: "https://www.url.com/aaa. I need to replace the aaa in each url with the url element from the JSON file being searched.
This is my working code: https://jsfiddle.net/25tmakbu/1/
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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
card.classList.add('hide');
userCardContainer.append(card)
return {
name: user.name,
x: user.x,
y: user.y,
element: card
}
})
})
<!-- language: lang-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;
}
<!-- language: lang-html -->
<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/aaa">
<div class="header" data-header></div>
</a>
<div class="body" data-body></div>
</div>
</template>
<!-- end snippet -->
答案1
得分: 1
由于您正在复制<a href="https://www.url.com/aaa">标签以及卡片模板的其余部分，您需要覆盖href的值。card.querySelector("a").setAttribute("href", "https://www.url.com/" + user.url);应该可以达到效果。
英文:
Since you are copying the <a href="https://www.url.com/aaa"> tag along with the rest of the card template, you'll need to override the href value. card.querySelector("a").setAttribute("href", "https://www.url.com/" + user.url); should do the trick.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论