求助：开发<li>排序筛选按钮及GitHub API仓库列表排序筛选功能

HTML Setup #

<button id="sortAsc">Sort Ascending</button>
<button id="sortDesc">Sort Descending</button>
<ul id="targetList">
  <li>Mango</li>
  <li>Apple</li>
  <li>Blueberry</li>
</ul>

JavaScript Logic #

const list = document.getElementById('targetList');
const sortAscBtn = document.getElementById('sortAsc');
const sortDescBtn = document.getElementById('sortDesc');

// Core sorting function
function sortList(order) {
  // Convert NodeList to array for sorting
  const items = Array.from(list.querySelectorAll('li'));
  
  items.sort((a, b) => {
    const textA = a.textContent.toLowerCase();
    const textB = b.textContent.toLowerCase();
    // Compare text content based on selected order
    return order === 'asc' 
      ? textA.localeCompare(textB) 
      : textB.localeCompare(textA);
  });
  
  // Clear and re-populate the list
  list.innerHTML = '';
  items.forEach(item => list.appendChild(item));
}

// Attach click listeners
sortAscBtn.addEventListener('click', () => sortList('asc'));
sortDescBtn.addEventListener('click', () => sortList('desc'));

If your

For your GitHub API app, we’ll add a set of selection options (radio buttons work best for mutually exclusive sorting choices) and tie them to a sorting function that re-renders your repo list. Here’s how to integrate this:

Step 1: Add Sorting Controls to Your HTML #

Drop this above your repo list container:

<div class="sort-controls">
  <label>
    <input type="radio" name="sortRepo" value="default" checked> Default Order
  </label>
  <label>
    <input type="radio" name="sortRepo" value="stars"> Sort by Stars (Highest First)
  </label>
  <label>
    <input type="radio" name="sortRepo" value="updated"> Sort by Last Updated (Newest First)
  </label>
</div>
<div id="repoContainer"></div>

Step 2: Implement Sorting & Render Logic #

Assuming you already fetch repo data into an array (let’s call it userRepos), here’s the code to handle sorting and rendering:

const repoContainer = document.getElementById('repoContainer');
const sortOptions = document.querySelectorAll('input[name="sortRepo"]');
let userRepos = []; // Replace with your actual GitHub API data

// Function to render the repo list
function renderRepos(sortedRepos) {
  repoContainer.innerHTML = '';
  sortedRepos.forEach(repo => {
    const repoCard = document.createElement('div');
    repoCard.classList.add('repo-card');
    repoCard.innerHTML = `
      <h3>${repo.name}</h3>
      <p>⭐ ${repo.stargazers_count} stars</p>
      <p>Last updated: ${new Date(repo.updated_at).toLocaleDateString()}</p>
    `;
    repoContainer.appendChild(repoCard);
  });
}

// Handle sort option changes
function handleSortChange() {
  const selectedSort = document.querySelector('input[name="sortRepo"]:checked').value;
  let sortedRepos = [...userRepos]; // Copy array to avoid mutating original data

  switch(selectedSort) {
    case 'stars':
      // Sort by star count descending
      sortedRepos.sort((a, b) => b.stargazers_count - a.stargazers_count);
      break;
    case 'updated':
      // Sort by last updated date descending
      sortedRepos.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
      break;
    default:
      // Fallback to GitHub's default order
      sortedRepos = [...userRepos];
      break;
  }

  renderRepos(sortedRepos);
}

// Attach event listeners to sort options
sortOptions.forEach(option => {
  option.addEventListener('change', handleSortChange);
});

// Initial render with default sorting
// Make sure to call this AFTER your repo data is fetched!
// renderRepos(userRepos);

Quick Notes #

• If you’re fetching repos asynchronously, wait until the API call resolves before initializing the render and event listeners.
• To add ascending sorting (e.g., lowest stars first), just flip the comparison in the sort function (change b - a to a - b).
• If you really need checkboxes instead of radio buttons (though sorting is usually single-dimension), you’d need to adjust logic to handle multiple active filters—but that’s less common for sorting use cases.

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