如何实现始终仅显示最多3个元素，添加或移除元素后自动维持显示数量？

Got it, let's fix this so your container always shows at most 3 elements—even when elements are removed, added, or the container is toggled. The issue with your current code is it only applies the 3-element limit when you first toggle the container open; it doesn't react to later changes like element removal or addition. Here's how to make it fully dynamic:

Step 1: Create a Reusable Display Update Function #

First, let's make a function that enforces the max-3 rule. We'll call this whenever the state of the container changes:

function updateMobKeysDisplay() {
  const $container = $('#mob-keys-container');
  // Hide all elements first, then show the first 3
  $container.children().hide().slice(0, 3).show();
}

Step 2: Update the Toggle Click Handler #

Modify your existing click event to call this function when the container is opened:

$('.info-mob').on('click', () => {
  const $container = $('#mob-keys-container');
  $container.toggle();
  
  // Only apply the display rule if the container is now visible
  if ($container.is(':visible')) {
    updateMobKeysDisplay();
  }
});

Step 3: Handle Dynamic Element Removal #

Since your elements are draggable, I assume they're being removed when dropped elsewhere. After removing an element, call our update function to show the next element in the queue. For example, if your removal logic looks like this:

// Example: When an element is dragged and removed (adjust to match your actual drag/drop code)
$('.answerIcon').on('dragend', function() {
  if ($(this).hasClass('removed')) { // Replace with your removal condition
    $(this).remove();
    updateMobKeysDisplay(); // Trigger the display update here
  }
});

Step 4: Handle Dynamic Element Addition #

If you have a function that adds new elements to the container, call the update function right after adding to keep the max-3 rule intact:

// Example function to add a new key element
function addMobKey(src, id) {
  const $newKey = $(`
    <img class="answerIcon mobIcon active" draggable="true" id="${id}" 
         src="${src}" alt="key">
  `);
  $('#mob-keys-container').append($newKey);
  updateMobKeysDisplay(); // Ensure we only show 3 after adding
}

Step 5: (Optional) Auto-React to All Container Changes #

For a foolproof solution that covers any unexpected changes (like elements added/removed by other scripts), use a MutationObserver to watch the container for child node changes:

const container = document.getElementById('mob-keys-container');
const observer = new MutationObserver((mutations) => {
  // Check if any child elements were added or removed
  mutations.forEach(mutation => {
    if (mutation.type === 'childList' && $('#mob-keys-container').is(':visible')) {
      updateMobKeysDisplay();
    }
  });
});

// Start observing the container for child node changes
observer.observe(container, { childList: true });

This observer will automatically trigger the display update whenever elements are added or removed, so you don't have to remember to call updateMobKeysDisplay() every time you modify the container's contents.

With all these pieces in place, your .mob-keys-container will always show at most 3 elements—whether you toggle it open, remove an element, or add a new one.

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