点击时li元素未切换class问题求助附相关标签代码

Hey there! Let's fix that issue where clicking your sort <li> items isn't toggling the ui-btn-active class. Based on your HTML structure, here's how to get this working smoothly:

First, Understand the Goal #

We need to:

• Remove the ui-btn-active class from all <li> elements in the sort list when one is clicked
• Add the ui-btn-active class to the clicked <li> to mark it as active
• (Optional) Trigger your sorting logic using the data-order-by value from the clicked item

Solution 1: Vanilla JavaScript (No Libraries) #

This works for projects that don't use jQuery or other frameworks. Make sure to wrap this code so it runs after the DOM is fully loaded:

document.addEventListener('DOMContentLoaded', function() {
  // Grab all sort list items
  const sortItems = document.querySelectorAll('.sort_by li');

  // Attach click event to each item
  sortItems.forEach(item => {
    item.addEventListener('click', function() {
      // Remove active class from all items
      sortItems.forEach(li => li.classList.remove('ui-btn-active'));
      // Add active class to the clicked item
      this.classList.add('ui-btn-active');

      // Grab the sort type from data attribute (for your sorting logic)
      const sortType = this.dataset.orderBy;
      console.log(`Switching to sort by: ${sortType}`);
      // Insert your actual sorting function here
    });
  });
});

Solution 2: jQuery (If You're Using It) #

If your project already uses jQuery (common for UI components like ui-btn-active), this is a more concise approach:

$(document).ready(function() {
  $('.sort_by li').on('click', function() {
    // Remove active class from siblings, add to current item
    $(this).siblings().removeClass('ui-btn-active');
    $(this).addClass('ui-btn-active');

    // Get the sort type from data attribute
    const sortType = $(this).data('order-by');
    console.log(`Switching to sort by: ${sortType}`);
    // Run your sorting logic here
  });
});

Solution 3: Event Delegation (For Dynamically Added Items) #

If your <li> elements are loaded dynamically (e.g., via AJAX), use event delegation to ensure clicks are captured even after new items are added:

Vanilla JS Version #

document.addEventListener('DOMContentLoaded', function() {
  // Target the parent <ul> instead of individual <li>s
  const sortList = document.querySelector('.sort_by');

  sortList.addEventListener('click', function(e) {
    // Check if the clicked element is an <li>
    if (e.target.tagName === 'LI') {
      // Remove active class from all <li>s
      sortList.querySelectorAll('li').forEach(li => li.classList.remove('ui-btn-active'));
      // Add active class to the clicked <li>
      e.target.classList.add('ui-btn-active');

      const sortType = e.target.dataset.orderBy;
      console.log(`Switching to sort by: ${sortType}`);
    }
  });
});

jQuery Version #

$(document).ready(function() {
  // Attach event to parent <ul>, listen for clicks on <li>s
  $('.sort_by').on('click', 'li', function() {
    $(this).siblings().removeClass('ui-btn-active');
    $(this).addClass('ui-btn-active');

    const sortType = $(this).data('order-by');
    console.log(`Switching to sort by: ${sortType}`);
  });
});

Key Things to Check #

• DOM Load Order: Make sure your JavaScript runs after the HTML elements exist. Wrapping code in DOMContentLoaded (vanilla) or $(document).ready() (jQuery) fixes this.
• No Event Blocking: Ensure no other scripts are preventing click events from firing (e.g., event.stopPropagation() in another handler).
• Class Spelling: Double-check that ui-btn-active is spelled correctly in both your HTML and JavaScript.

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