jQuery addClass函数无报错但不生效，请求技术协助

Let's walk through the issues with your code and get it working properly:

1. Incorrect Selector in Click Binding #

Your current code uses $("card").click(...) — this is trying to select HTML elements with the tag name <card>, but your target elements are <div>s with the class card. You need to use the class selector (dot notation) instead:

// Wrong: looking for <card> tags
$("card").click(...)

// Correct: selecting elements with class "card"
$(".card").click(...)

2. Handling Dynamically Rendered Elements #

Since your HTML uses template syntax ({{ key }}, {{ value }}), it's likely these .card elements are rendered dynamically after the initial page load. Direct .click() bindings only work for elements that exist when the code runs. For dynamic elements, use event delegation:

$(document).on('click', '.card', function(e) {
  object_selected($(this).attr('id'));
});

This listens for clicks at the document level and checks if the target matches .card, so it works even for elements added later.

3. Debugging & Validation Steps #

Add extra checks to make sure your code is targeting the right elements:

• In your object_selected function, log the target element to confirm it exists:

  function object_selected(card_id) {
    object_unselected();
    const card = $('#' + card_id);
    console.log("Attempting to select element:", card);
    
    // Only add class if the element exists
    if (card.length > 0) {
      card.addClass("object-selected");
    } else {
      console.error(`Element with id "${card_id}" not found!`);
    }
  }
  

• Verify the id attribute on your .card elements is rendering correctly. Right-click the card in your browser, inspect it, and check if the id is something like object__123 (no missing brackets or syntax errors from your template).

4. Check the object_unselected Function #

Make sure this function isn't accidentally removing the class right after you add it. A common correct implementation would be:

function object_unselected() {
  // Remove the class from all previously selected elements
  $('.object-selected').removeClass('object-selected');
}

If this function has an error (like a wrong selector), it could break the flow.

Corrected Full JS Code #

Here's the combined fixed code:

function object_unselected() {
  $('.object-selected').removeClass('object-selected');
}

function object_selected(card_id) {
  object_unselected();
  const card = $('#' + card_id);
  console.log("Target card element:", card);
  
  if (card.length) {
    card.addClass("object-selected");
    console.log("Class added successfully!");
  } else {
    console.error(`Card with id "${card_id}" does not exist.`);
  }
}

// Use event delegation for dynamic cards
$(document).on('click', '.card', function(e) {
  const cardId = $(this).attr('id');
  console.log("Clicked card id:", cardId);
  if (cardId) {
    object_selected(cardId);
  } else {
    console.error("Clicked card has no id attribute!");
  }
});

After making these changes, test again. The console logs will help you spot any remaining issues (like missing ids or unrendered elements).

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