多列表选项关联段落合并弹窗文本字段的实现咨询

Alright, let's break down how to modify your existing code to achieve this multi-selection and merged text popup functionality. Here's a step-by-step solution with concrete code examples:

1. Update Your HTML Structure #

First, tweak your list items to add data attributes for linking to the associated pages, plus add a button to trigger the popup and a modal container to display merged content:

<!-- Modified topic list -->
<ul id="topicList">
  <li><a href="#" data-page="abnormal-conditions.html">Abnormal conditions</a></li>
  <li><a href="#" data-page="water-contamination.html">Water contamination</a></li>
  <li><a href="#" data-page="monitor-closely.html">Monitor closely</a></li>
</ul>

<!-- Button to show merged content -->
<button id="showMergedBtn">View Merged Text</button>

<!-- Modal for displaying merged content -->
<div id="mergedModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h3>Merged Selected Content</h3>
    <textarea id="mergedText" rows="10" cols="80" readonly></textarea>
    <button id="clearSelectionBtn">Clear All Selections</button>
  </div>
</div>

2. Add Basic CSS for the Modal #

Style the modal to make it look like a proper popup and highlight selected list items:

/* Modal base styles */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 700px;
}

/* Close button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Highlight selected list items */
#topicList li.active {
  background-color: #e0e0e0;
}

3. Implement the JavaScript Logic #

This is the core part that handles selection, content fetching, merging, and popup display:

// Global storage for selected content and their order
const selectedContents = [];

// Get DOM elements
const topicList = document.getElementById('topicList');
const showMergedBtn = document.getElementById('showMergedBtn');
const mergedModal = document.getElementById('mergedModal');
const mergedText = document.getElementById('mergedText');
const closeBtn = document.querySelector('.close');
const clearSelectionBtn = document.getElementById('clearSelectionBtn');

// Handle list item clicks
topicList.addEventListener('click', async (e) => {
  e.preventDefault(); // Stop default new tab behavior
  if (e.target.tagName !== 'A') return;

  const listItem = e.target.parentElement;
  const pageUrl = e.target.dataset.page;

  // Toggle selection state
  if (listItem.classList.contains('active')) {
    // Remove from selection
    const index = selectedContents.findIndex(item => item.url === pageUrl);
    if (index !== -1) selectedContents.splice(index, 1);
    listItem.classList.remove('active');
  } else {
    try {
      // Fetch and parse the associated page's content
      const response = await fetch(pageUrl);
      if (!response.ok) throw new Error(`Failed to load content from ${pageUrl}`);
      const html = await response.text();
      
      // Extract paragraph text from the fetched page
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, 'text/html');
      const paragraphContent = doc.querySelector('p').textContent.trim();

      // Add to selected content array
      selectedContents.push({ url: pageUrl, text: paragraphContent });
      listItem.classList.add('active');
    } catch (error) {
      alert(`Oops, something went wrong: ${error.message}`);
    }
  }
});

// Show merged content in modal
showMergedBtn.addEventListener('click', () => {
  if (selectedContents.length === 0) {
    alert('Please select at least one item first!');
    return;
  }
  // Merge content in the order of selection
  const mergedResult = selectedContents.map(item => item.text).join('\n\n');
  mergedText.value = mergedResult;
  mergedModal.style.display = 'block';
});

// Close modal
closeBtn.addEventListener('click', () => {
  mergedModal.style.display = 'none';
});

// Clear all selections
clearSelectionBtn.addEventListener('click', () => {
  selectedContents.length = 0;
  document.querySelectorAll('#topicList li.active').forEach(li => li.classList.remove('active'));
  mergedText.value = '';
  mergedModal.style.display = 'none';
});

// Close modal when clicking outside of it
window.addEventListener('click', (e) => {
  if (e.target === mergedModal) {
    mergedModal.style.display = 'none';
  }
});

Key Notes to Keep in Mind #

• Local Server Requirement: If you're testing locally, use a dev server like VS Code's Live Server plugin. Browsers block fetch requests from file:// URLs due to security restrictions.
• Content Parsing Flexibility: If your associated pages have multiple <p> tags, adjust the code to use doc.querySelectorAll('p') and loop through them to collect all text.
• Error Handling: The code includes basic error catching for failed content loads, so users get feedback if a page can't be accessed.

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