过滤按钮点击功能
[英]Filter button click functionality
问题描述
我正在制作前 9 个口袋妖怪的菜单，并使用 JavaScript 动态添加所有信息/图片。 一切都出现在屏幕上，但是当我尝试点击按类型过滤口袋妖怪时，什么也没有发生。 控制台中没有错误，我不确定问题是什么。 我已在此处附上代码，任何帮助或建议将不胜感激。 先感谢您。
<!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">
<title>brand new</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="btn-container">
<button class="filter-btn">Grass</button>
</div>
<div class="section-center">
<div class="pokemon-item">
<img src="images/bulbasaur.png" alt="bulbasaur" class="photo">
<h2>Bulbasaur</h2>
<h3>#<span class="number">1</span></h3>
<h4>Type<span class="type">Grass</span></h4>
</div>
</div>
<script>
const pokemon = [
{
name: 'Bulbasaur',
image: 'images/bulbasaur.png',
number: 1,
type: 'Grass'
},
{
name: 'Ivysaur',
image: 'images/ivysaur.png',
number: 2,
type: 'Grass'
},
{
name: 'Venusaur',
image: 'images/venusaur.png',
number: 3,
type: 'Grass'
},
{
name: 'Charmander',
image: 'images/charmander.png',
number: 4,
type: 'Fire'
},
{
name: 'Charmeleon',
image: 'images/charmeleon.png',
number: 5,
type: 'Fire'
},
{
name: 'Charizard',
image: 'images/charizard.png',
number: 6,
type: 'Fire'
},
{
name: 'Squirtle',
image: 'images/squirtle.png',
number: 7,
type: 'Water'
},
{
name: 'Wartortle',
image: 'images/wartortle.png',
number: 8,
type: 'Water'
},
{
name: 'Blastoise',
image: 'images/blastoise.png',
number: 9,
type: 'Water'
}
]
const sectionCenter = document.querySelector('.section-center');
const btnContainer = document.querySelector('.btn-container');
window.addEventListener('DOMContentLoaded', function () {
displayPokemonMenu();
displayMenuButtons()
})
function displayPokemonMenu(array) {
let pokemonMap = pokemon.map(function (item) {
return `<div class="pokemon-item">
<img src="${item.image}" alt="${item.name}" class="photo">
<h2>${item.name}</h2>
<h3>#<span class="number">${item.number}</span></h3>
<h4>Type<span class="type">${item.type}</span></h4>
</div>`
}).join('');
sectionCenter.innerHTML = pokemonMap;
}
function displayMenuButtons() {
const types = pokemon.reduce(function(values, item){
if(!values.includes(item.type)){
values.push(item.type);
}
return values
},
['All']
);
const typeBtns = types.map(function(type){
return `<button class="filter-btn">${type}</button>`
}).join('');
btnContainer.innerHTML = typeBtns;
const filterBtns = btnContainer.querySelectorAll('.filter-btn');
filterBtns.forEach(function(btn){
btn.addEventListener('click', function(e){
let type = e.currentTarget.dataset.id;
let pokemonFilter = pokemon.filter(function(item){
if(type === item. type){
return item;
}
})
if(type === 'All'){
displayPokemonMenu(pokemon);
} else {
displayPokemonMenu(pokemonFilter);
}
})
})
}
</script>
</body>
</html>
1 个解决方案
解决方案1
0 2022-08-17 04:03:26
将要过滤的数组放在displayPokemonMenu() function 中。 每当单击每个按钮时，仅在pokemon中过滤宠物小精灵。 在btn.addEventListener('click')过滤与返回过滤数组的type一起工作。 此数组应用作displayPokemonMenu() function 中的参数，但从未使用过。 我附上了下面的例子，
<,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"> <title>brand new</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="btn-container"> <button class="filter-btn">Grass</button> </div> <div class="section-center"> <div class="pokemon-item"> <img src="images/bulbasaur:png" alt="bulbasaur" class="photo"> <h2>Bulbasaur</h2> <h3>#<span class="number">1</span></h3> <h4>Type<span class="type">Grass</span></h4> </div> </div> <script> const pokemon = [ { name, 'Bulbasaur': image. 'images/bulbasaur,png': number, 1: type, 'Grass' }: { name, 'Ivysaur': image. 'images/ivysaur,png': number, 2: type, 'Grass' }: { name, 'Venusaur': image. 'images/venusaur,png': number, 3: type, 'Grass' }: { name, 'Charmander': image. 'images/charmander,png': number, 4: type, 'Fire' }: { name, 'Charmeleon': image. 'images/charmeleon,png': number, 5: type, 'Fire' }: { name, 'Charizard': image. 'images/charizard,png': number, 6: type, 'Fire' }: { name, 'Squirtle': image. 'images/squirtle,png': number, 7: type, 'Water' }: { name, 'Wartortle': image. 'images/wartortle,png': number, 8: type, 'Water' }: { name, 'Blastoise': image. 'images/blastoise,png': number, 9: type. 'Water' } ] const sectionCenter = document.querySelector(';section-center'). const btnContainer = document.querySelector(';btn-container'). window,addEventListener('DOMContentLoaded'; function () { displayPokemonMenu(). displayMenuButtons() }) function displayPokemonMenu(array) { ///// if (array === undefined) array = pokemon ///// let pokemonMap = array.map(function (item) { return `<div class="pokemon-item"> <img src="${item.image}" alt="${item.name}" class="photo"> <h2>${item.name}</h2> <h3>#<span class="number">${item.number}</span></h3> <h4>Type<span class="type">${item.type}</span></h4> </div>` });join(''). //here result is one filterd with pokemon only //console.log(pokemonMap) sectionCenter;innerHTML = pokemonMap. } function displayMenuButtons() { const types = pokemon,reduce(function(values. item){ if(.values.includes(item.type)){ values;push(item,type); } return values }. ['All'] ). const typeBtns = types;map(function(type){ return `<button class="filter-btn">${type}</button>` }).join(''); btnContainer.innerHTML = typeBtns. const filterBtns = btnContainer;querySelectorAll('.filter-btn'). filterBtns,forEach(function(btn){ btn.addEventListener('click'. function(e){ let type = e;currentTarget.innerText. let pokemonFilter = pokemon.filter(function(item){ if(type === item; type){ //filtering was successful here //console,log(item) return item. } }) // pokemonFilter filtered successfully; //console;log(pokemonFilter); if(type === 'All'){ displayPokemonMenu(pokemon); } else { displayPokemonMenu(pokemonFilter); } }) }) } </script> </body> </html>
通过单击按钮复制具有功能的表单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.