jQuery如何使点击触发的类添加效果永久生效

Hey there! The core issue here is that in-memory state (like the classes you add via your click handler) gets wiped when the page reloads or you navigate away. To fix this, we need to save the state of which elements have the cart-added class persistently in the browser. Here's a straightforward, step-by-step implementation plan:

1. Add Unique Identifiers to Your Elements #

First, give each parent element (the one that gets the cart-added class) a unique data-* attribute so we can track it later. For example:

<!-- Example parent element structure -->
<div class="product-container" data-item-id="item-456">
  <button class="to-add">Add to Cart</button>
</div>

Use a unique ID (like a product ID from your database) for data-item-id—this ensures we can match saved state to the exact element later.

2. Update Your Click Handler to Save State #

Modify your existing click function to store the unique ID of the added item in localStorage (a persistent browser storage that stays even after the page closes). Here's the updated code:

$('.to-add').one('click', function() {
  const $parent = $(this).parent();
  const itemId = $parent.data('item-id');

  // Apply the class and hide the button as before
  $parent.toggleClass('cart-added');
  $(this).css('display', 'none');

  // Save the state to localStorage
  // Get existing added items (or an empty array if none exist)
  let addedItems = JSON.parse(localStorage.getItem('cartAddedItems')) || [];
  // Add the item ID if it's not already in the list
  if (!addedItems.includes(itemId)) {
    addedItems.push(itemId);
    localStorage.setItem('cartAddedItems', JSON.stringify(addedItems));
  }
});

• localStorage only stores strings, so we use JSON.stringify() to convert our array of IDs into a string, and JSON.parse() to turn it back into an array when we need to read it.

3. Restore the State When the Page Loads #

When the page finishes loading, we need to check localStorage for any saved items and reapply the cart-added class to the corresponding elements. Add this code:

$(document).ready(function() {
  // Retrieve saved items from localStorage
  const addedItems = JSON.parse(localStorage.getItem('cartAddedItems')) || [];

  // Loop through each saved ID and update the UI
  addedItems.forEach(itemId => {
    const $targetParent = $(`[data-item-id="${itemId}"]`);
    if ($targetParent.length) {
      $targetParent.addClass('cart-added');
      $targetParent.find('.to-add').css('display', 'none');
    }
  });
});

Quick Notes #

• Persistence: localStorage will keep this data until the user manually clears their browser cache/data, or you delete it explicitly with localStorage.removeItem('cartAddedItems').
• Dynamic Content: If your product list loads dynamically (after the initial page load), run the restore code right after the dynamic content is rendered instead of just on document.ready.
• Unique IDs: Double-check that data-item-id is unique for every element—this is critical to avoid applying the class to the wrong items.

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