从网上COPY一个网址 想给每个name 加个超链接 什么也不懂。。希望指导指导
const data = [
{
id: 1,
name: "图-160",
img: "C:/Users/Lenovo/Desktop/页面/images/T-160.JPG",
price: 74,
cat: "轰炸机",
},
{
id: 2,
name: "歼-31",
img: "C:/Users/Lenovo/Desktop/页面/images/J-31.JPG",
price: 62,
cat: "歼击机",
},
{
id: 3,
name: "歼-20",
img: "C:/Users/Lenovo/Desktop/页面/images/J-20.JPG",
price: 40,
cat: "歼击机",
},
{
id: 4,
name: "运-5",
img: "C:/Users/Lenovo/Desktop/页面/images/Y-5.JPG",
price: 200,
cat: "运输机",
},
{
id: 5,
name: "运-20",
img: "C:/Users/Lenovo/Desktop/页面/images/Y-20.JPG",
price: 16,
cat: "运输机",
},
{
id: 6,
name: "安-124",
img: "C:/Users/Lenovo/Desktop/页面/images/A-124.JPG",
price: 16,
cat: "运输机",
},
];
const productsContainer = document.querySelector(".products")
const searchInput = document.querySelector(".search")
const categoriesContainer = document.querySelector(".cats")
const priceRange = document.querySelector(".priceRange")
const priceValue = document.querySelector(".priceValue")
const displayProducts = (filteredProducts) =>{
productsContainer.innerHTML = filteredProducts.map(product=>
`
<div class="product">
<img
src=${product.img}
alt=""
/>
<span class="name"><a href="">${product.name}a>span>
<span class="priceText">$${product.price}span>
`
).join("");
};
displayProducts(data);
searchInput.addEventListener("keyup",(e) => {
const value = e.target.value.toLowerCase();
if(value){
displayProducts(data.filter(item=> item.name.toLowerCase().indexOf(value) != -1))
}else{
displayProducts(data);
}
});
const setCategories = () => {
const allCats = data.map((item) => item.cat)
const categories = ["All",
...allCats.filter((item,i) => {
return allCats.indexOf(item)===i
})
];
categoriesContainer.innerHTML = categories.map(cat=>
`
<span class="cat">${cat}span>
`
).join("");
categoriesContainer.addEventListener("click",(e)=>{
const selectedCat = e.target.textContent;
selectedCat === "All" ? displayProducts(data) : displayProducts(data.filter(item=>
item.cat === selectedCat));
});
};
const setPrices = ()=>{
const priceList = data.map((item) => item.price);
const minPrice = Math.min(...priceList)
const maxPrice = Math.max(...priceList)
priceRange.min = minPrice
priceRange.max = maxPrice
priceRange.value = maxPrice
priceValue.textContent = "$" + maxPrice
priceRange.addEventListener("input",(e)=>{
priceValue.textContent = "$" + e.target.value;
displayProducts(data.filter((item) => item.price <= e.target.value));
});
};
setCategories();
setPrices();
你这个图片是本地的话只能这样设置超链接了,使用file协议。file:///
href="file:///${product.img}"
不知道你这个问题是否已经解决, 如果还没有解决的话: