如何用jQuery实现WordPress ACF页面的下拉框内容筛选

Hey James, sounds like you want to add dynamic, multi-condition filtering to your ACF-built WordPress page using those two dropdowns. Let’s walk through a straightforward implementation that works with your simplified HTML setup:

First, make sure your dropdowns and article items have clear classes/data attributes so JavaScript can target them easily. Here’s how to structure it:

<!-- Filter Controls -->
<div class="filter-bar">
  <select id="association-select">
    <option value="all">All Associations</option>
    <option value="wales">Wales</option>
    <option value="scotland">Scotland</option>
    <!-- Add all your association options here -->
  </select>

  <select id="discipline-select">
    <option value="all">All Disciplines</option>
    <option value="medicine">Medicine</option>
    <option value="law">Law</option>
    <!-- Add all your discipline options here -->
  </select>
</div>

<!-- Article List -->
<div class="articles-grid">
  <!-- Each article gets data attributes matching its categories -->
  <article class="article-card" data-assoc="wales" data-disc="medicine">
    <h3>Wales Medical Symposium 2024</h3>
    <p>Key updates on Welsh healthcare policies...</p>
  </article>

  <article class="article-card" data-assoc="scotland" data-disc="law">
    <h3>Scottish Legal Reform Workshop</h3>
    <p>Discussion on new legislative changes...</p>
  </article>
  <!-- Add all your generated articles here -->
</div>

Pro tip: When generating this HTML via ACF, make sure the data-assoc and data-disc values match the dropdown option values exactly (case-insensitive is fine, but consistency helps).

Next, write the JS to listen for dropdown changes and show/hide matching articles. You can drop this in a <script> tag at the end of your page or enqueue it via WordPress:

// Grab DOM elements
const assocFilter = document.getElementById('association-select');
const discFilter = document.getElementById('discipline-select');
const allArticles = document.querySelectorAll('.article-card');

// Core filtering function
function filterContent() {
  const selectedAssoc = assocFilter.value.toLowerCase();
  const selectedDisc = discFilter.value.toLowerCase();

  allArticles.forEach(article => {
    const articleAssoc = article.dataset.assoc.toLowerCase();
    const articleDisc = article.dataset.disc.toLowerCase();

    // Check if article matches both filters (or "all" bypasses the condition)
    const matchesAssoc = selectedAssoc === 'all' || articleAssoc === selectedAssoc;
    const matchesDisc = selectedDisc === 'all' || articleDisc === selectedDisc;

    // Show/hide based on matches
    if (matchesAssoc && matchesDisc) {
      article.style.display = 'block'; // Or use your custom display class
    } else {
      article.style.display = 'none';
    }
  });
}

// Run filter once on page load to set initial state
filterContent();

// Listen for dropdown changes
assocFilter.addEventListener('change', filterContent);
discFilter.addEventListener('change', filterContent);

For a better user experience, add CSS transitions to make filtering feel smoother:

.article-card {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
  transform: translateY(0);
}

.article-card.hidden {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  height: 0;
  margin: 0;
  overflow: hidden;
}

Then update the JS to use a class instead of directly setting display:

// Replace the show/hide lines in filterContent()
if (matchesAssoc && matchesDisc) {
  article.classList.remove('hidden');
} else {
  article.classList.add('hidden');
}

• If your articles load dynamically (e.g., via AJAX or pagination), re-run filterContent() after new content loads to ensure it gets filtered correctly.
• Double-check that dropdown values and article data attributes align—mismatched text will break the filtering.

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