使用jQuery实现点击缩略Div替换目标容器内Div的功能

I get it, the image gallery example you found works great for <img> tags, but since you're working with divs styled with backgrounds, we need to adjust the approach to handle element cloning and replacement directly. Let's break this down into a straightforward implementation:

Step 1: Set Up Your HTML Structure #

First, let's define your anchor divs and the target container. I'll add some sample background styles to make the behavior clear:

<!-- Thumbnail anchors -->
<div class="rm-a" style="width: 100px; height: 100px; background: #ff4444; margin: 10px; cursor: pointer; display: inline-block;">Anchor A</div>
<div class="rm-b" style="width: 100px; height: 100px; background: #44ff44; margin: 10px; cursor: pointer; display: inline-block;">Anchor B</div>
<div class="rm-c" style="width: 100px; height: 100px; background: #4444ff; margin: 10px; cursor: pointer; display: inline-block;">Anchor C</div>

<!-- Target container -->
<div class="col-lg-6" style="width: 300px; height: 300px; border: 2px solid #ccc; margin-top: 20px; padding: 10px;"></div>

Step 2: Add JavaScript Logic #

We'll use vanilla JavaScript to handle the click events. I'll cover two approaches: direct binding (simple for fixed elements) and event delegation (better if you might add more anchors later).

Option 1: Direct Event Binding (Simple for Static Elements) #

This is the most straightforward method if your anchor divs won't change dynamically:

// Grab the target container once
const targetContainer = document.querySelector('.col-lg-6');

// Handle rm-a click: clone and append to container
document.querySelector('.rm-a').addEventListener('click', () => {
  // Create a deep clone of rm-a (preserves all styles/children)
  const clonedAnchor = document.querySelector('.rm-a').cloneNode(true);
  // Add the clone to the container (doesn't remove existing content)
  targetContainer.appendChild(clonedAnchor);
});

// Handle rm-b click: replace container content
document.querySelector('.rm-b').addEventListener('click', () => {
  // Clear existing content first
  targetContainer.innerHTML = '';
  // Clone rm-b and add it to the empty container
  const clonedAnchor = document.querySelector('.rm-b').cloneNode(true);
  targetContainer.appendChild(clonedAnchor);
});

// Optional: Add behavior for rm-c (customize as needed)
document.querySelector('.rm-c').addEventListener('click', () => {
  targetContainer.innerHTML = '';
  const clonedAnchor = document.querySelector('.rm-c').cloneNode(true);
  targetContainer.appendChild(clonedAnchor);
});

Option 2: Event Delegation (Better for Dynamic Elements) #

If you plan to add more anchor divs later, event delegation is smarter—you only bind one event to a parent element:

const targetContainer = document.querySelector('.col-lg-6');
// Use a parent element that exists on page load (document works if no closer parent)
const anchorParent = document.body;

anchorParent.addEventListener('click', (e) => {
  const clickedAnchor = e.target;

  if (clickedAnchor.classList.contains('rm-a')) {
    // Clone and append rm-a
    const clonedAnchor = clickedAnchor.cloneNode(true);
    targetContainer.appendChild(clonedAnchor);
  } else if (clickedAnchor.classList.contains('rm-b')) {
    // Replace container with rm-b
    targetContainer.innerHTML = '';
    const clonedAnchor = clickedAnchor.cloneNode(true);
    targetContainer.appendChild(clonedAnchor);
  } else if (clickedAnchor.classList.contains('rm-c')) {
    // Add your custom behavior for rm-c here
    targetContainer.innerHTML = '';
    const clonedAnchor = clickedAnchor.cloneNode(true);
    targetContainer.appendChild(clonedAnchor);
  }
});

Key Details to Remember #

• cloneNode(true) is essential: it creates a deep copy of the element, including all child nodes, inline styles, and CSS classes. Using cloneNode(false) would only copy the empty div shell.
• For rm-a, appendChild() adds the clone alongside existing content in the container. For rm-b, we clear the container first with innerHTML = '' to replace the content entirely.
• If your divs use external CSS classes for backgrounds or styling, cloneNode(true) will preserve those classes automatically—no extra work needed.

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