基于Javascript、JSON(DOM)实现鞋类电商分类筛选技术问询

Alright, let's build this interactive shoe category filter for your online store. I'll walk you through the full HTML, CSS, and JavaScript code, with plain-language explanations so you understand exactly how it works.

Step 1: HTML Structure #

First, we'll set up the category buttons and a container to display the filtered shoes:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shoe Store</title>
    <link rel="stylesheet" href="styles.css"> <!-- Optional, for clean styling -->
</head>
<body>
    <div class="filter-buttons">
        <button class="filter-btn" data-category="Wedge">Wedge</button>
        <button class="filter-btn" data-category="Stilettos">Stilettos</button>
    </div>

    <div id="shoe-container" class="shoe-grid"></div>

    <script src="script.js"></script>
</body>
</html>

Step 2: Basic CSS (Optional but Polished) #

Add some simple styling to make buttons and product cards look professional:

.filter-buttons {
    margin: 20px 0;
    padding-left: 20px;
}

.filter-btn {
    padding: 10px 20px;
    margin-right: 10px;
    border: none;
    background-color: #2d3436;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.filter-btn:hover {
    background-color: #4a4e69;
}

.shoe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    padding: 0 20px;
}

.shoe-card {
    border: 1px solid #eee;
    padding: 18px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.shoe-card h3 {
    margin-top: 0;
    color: #2d3436;
}

.shoe-card p {
    margin: 6px 0;
    color: #636e72;
}

Step 3: JavaScript Logic #

Now we'll handle reading your JSON data, filtering it on button clicks, and rendering the results:

// Your shoe inventory data (can also load from external JSON via fetch later)
const shoeData = [ 
  { "name": "DKNY", "category": "Stilettos", "location": "Texas" },
  { "name": "Prada", "category": "Wedge", "location": "Texas" },
  { "name": "Jimmy Choo", "category": "Stilettos", "location": "Melbourne" }
];

// Grab elements from the page
const filterButtons = document.querySelectorAll('.filter-btn');
const shoeContainer = document.getElementById('shoe-container');

// Function to display shoes on the page
function renderShoes(shoes) {
    // Clear old content first
    shoeContainer.innerHTML = '';
    
    // Create a card for each shoe and add it to the container
    shoes.forEach(shoe => {
        const shoeCard = document.createElement('div');
        shoeCard.classList.add('shoe-card');
        
        shoeCard.innerHTML = `
            <h3>${shoe.name}</h3>
            <p>Category: ${shoe.category}</p>
            <p>Location: ${shoe.location}</p>
        `;
        
        shoeContainer.appendChild(shoeCard);
    });
}

// Function to filter shoes by selected category
function filterShoes(category) {
    const filteredShoes = shoeData.filter(shoe => shoe.category === category);
    renderShoes(filteredShoes);
}

// Add click listeners to all filter buttons
filterButtons.forEach(button => {
    button.addEventListener('click', () => {
        const selectedCategory = button.dataset.category;
        filterShoes(selectedCategory);
    });
});

// Optional: Show all shoes when the page loads
// renderShoes(shoeData);

Quick Breakdown: #

• Data Handling: We start with your JSON data stored in shoeData. Later, if you want to load this from an external file, you can swap this out with a fetch() call (e.g., fetch('shoes.json').then(res => res.json()).then(data => shoeData = data)).
• Button Logic: Each button uses a data-category attribute that matches the category values in your JSON. When clicked, we grab this value and use Array.filter() to pull only matching shoes.
• Rendering: The renderShoes function clears old content, builds HTML cards for each filtered shoe, and adds them to the page.

Bonus: Add an "All Shoes" Button #

If you want users to see all inventory again, just add this button to the HTML:

<button class="filter-btn" data-category="all">All Shoes</button>

And update the filterShoes function to handle it:

function filterShoes(category) {
    let filteredShoes;
    if (category === 'all') {
        filteredShoes = [...shoeData]; // Make a copy of all data
    } else {
        filteredShoes = shoeData.filter(shoe => shoe.category === category);
    }
    renderShoes(filteredShoes);
}

内容的提问来源于stack exchange，提问作者A M