点击筛选图片分类功能求助：实现点击logo链接仅显示logo类图片

Hey there! Let's get that image filtering working for your mosaic layout. I've put together a simple, vanilla JS solution that'll let you toggle to show only logo images when clicking the logo link—no extra libraries required.

Make sure you have filter controls linked to your image categories, and your images have consistent base classes plus their category classes:

<!-- Filter controls (add this above your mosaic) -->
<div class="filter-buttons">
  <a href="#" class="filter-btn active" data-filter="all">All</a>
  <a href="#" class="filter-btn" data-filter="photo">Photos</a>
  <a href="#" class="filter-btn" data-filter="logo">Logos</a>
</div>

<!-- Your mosaic container with images -->
<div class="mosaic-grid">
  <img src="your-logo-1.jpg" class="mosaic-img all logo" alt="Company Logo">
  <img src="your-photo-1.jpg" class="mosaic-img all photo" alt="Landscape Photo">
  <img src="your-logo-2.jpg" class="mosaic-img all logo" alt="Brand Logo">
  <img src="your-photo-2.jpg" class="mosaic-img all photo" alt="Portrait Photo">
  <!-- Add all your other images here -->
</div>

I added a data-filter attribute to each link (matches your image classes) and a base mosaic-img class to every image—this makes it easier to target them with JS later.

This handles the visibility of images and gives your filter links some feedback:

/* Your existing mosaic layout styles go here (grid/flex/float etc.) */
.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.mosaic-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

/* Class to hide non-matching images */
.mosaic-img.hidden {
  display: none;
}

/* Active filter link styling (optional but helpful for users) */
.filter-btn.active {
  color: #2563eb;
  font-weight: bold;
  text-decoration: underline;
}

/* Remove default link styles if needed */
.filter-btn {
  margin: 0 10px;
  text-decoration: none;
  color: #333;
}

The .hidden class is key here—it's how we'll toggle visibility without messing with your core layout styles.

This code listens for clicks on your filter links and shows/hides the right images:

// Grab all filter buttons and mosaic images
const filterButtons = document.querySelectorAll('.filter-btn');
const mosaicImages = document.querySelectorAll('.mosaic-img');

// Add click event to each filter button
filterButtons.forEach(button => {
  button.addEventListener('click', function(e) {
    e.preventDefault(); // Stop the link from jumping to the top
    
    // Update active button styling
    filterButtons.forEach(btn => btn.classList.remove('active'));
    this.classList.add('active');
    
    // Get the category we need to filter by
    const targetFilter = this.getAttribute('data-filter');
    
    // Loop through all images to show/hide them
    mosaicImages.forEach(img => {
      if (targetFilter === 'all' || img.classList.contains(targetFilter)) {
        img.classList.remove('hidden'); // Show matching images
      } else {
        img.classList.add('hidden'); // Hide non-matching images
      }
    });
  });
});

Here's what it does step-by-step:

• Prevents the link from doing its default jump behavior
• Updates which filter button looks active
• Checks which category was clicked
• Shows images that match the category (or all images if "All" is clicked) and hides the rest

Quick notes: #

• If you're using a different layout system (like Flexbox or float), this will still work—just keep your existing layout CSS intact.
• If you want to add smooth transitions, you can replace display: none with opacity: 0 and visibility: hidden in the .hidden class, and add a transition to .mosaic-img for a fade effect.

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