如何使用jQuery修改博客Ajax按钮的data-icon属性值？

I see the issue you're facing—your button switches text to "Less Posts" but the icon (tied to data-icon) stays stuck on 7 instead of switching to 6. Let's break down what was wrong with your original code and fix it properly.

What Was Wrong With Your Original Snippet #

Your code had two key issues:

1. Typo & Return Type: document.getElementByClassName is misspelled (it should be getElementsByClassName—note the plural "Elements"). This method returns an HTMLCollection (a list of elements), not a single element, so you can't call setAttribute directly on it.
2. Incorrect Syntax: The setAttribute call had misplaced parentheses—it should be setAttribute("data-icon", "6") (attribute name first, then value).

Working Solutions #

Below are two approaches (native JavaScript and jQuery) to handle the toggle correctly, including updating both the text and data-icon attribute.

Option 1: Native JavaScript

This will work if your button exists when the page loads. If it's dynamically added via Ajax, skip to the event delegation version below.

// Wait for the DOM to be fully loaded before running the code
document.addEventListener('DOMContentLoaded', function() {
  // Grab the first matching button (adjust the index if you have multiple)
  const toggleButton = document.getElementsByClassName("el-pagination-button")[0];

  toggleButton.addEventListener('click', function() {
    // Check the current state of the button
    if (this.textContent.includes("Less Posts")) {
      // Switch back to "More Posts" state
      this.textContent = "More Posts";
      this.setAttribute("data-icon", "7");
      this.classList.remove("el-show-less");
      this.classList.add("el-show-more"); // Add back the original class if needed
    } else {
      // Switch to "Less Posts" state
      this.textContent = "Less Posts";
      this.setAttribute("data-icon", "6");
      this.classList.add("el-show-less");
      this.classList.remove("el-show-more");
    }
  });
});

If your button is loaded dynamically via Ajax, use event delegation to ensure the click event is captured even for elements added later:

document.addEventListener('DOMContentLoaded', function() {
  // Listen for clicks on the entire document, filter to our button
  document.addEventListener('click', function(e) {
    if (e.target.classList.contains("el-pagination-button")) {
      const btn = e.target;
      if (btn.textContent.includes("Less Posts")) {
        btn.textContent = "More Posts";
        btn.setAttribute("data-icon", "7");
        btn.classList.remove("el-show-less");
        btn.classList.add("el-show-more");
      } else {
        btn.textContent = "Less Posts";
        btn.setAttribute("data-icon", "6");
        btn.classList.add("el-show-less");
        btn.classList.remove("el-show-more");
      }
    }
  });
});

Option 2: jQuery (Simpler if You're Using It)

If your site already uses jQuery, this is a more concise approach:

$(document).ready(function() {
  // Use event delegation for dynamic buttons
  $(document).on('click', '.el-pagination-button', function() {
    const $btn = $(this);
    if ($btn.hasClass('el-show-less')) {
      // Revert to "More Posts"
      $btn.text('More Posts').attr('data-icon', '7').removeClass('el-show-less').addClass('el-show-more');
    } else {
      // Switch to "Less Posts"
      $btn.text('Less Posts').attr('data-icon', '6').addClass('el-show-less').removeClass('el-show-more');
    }
  });
});

Key Notes #

• Make sure to match the class names exactly (e.g., el-show-less, el-show-more) to your existing HTML.
• If your Ajax load changes the button's state outside of this click handler, you may need to hook into the Ajax success event to update the data-icon as well.

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