JavaScript 如何在弹窗获取 ID 值并作为链接参数实现页面跳转

在Web开发中，经常会遇到需要在弹窗中获取特定元素的ID值，并将其作为链接参数传递，从而实现页面跳转的需求。这在用户交互和数据传递方面具有重要意义，下面将详细介绍如何通过JavaScript实现这一功能。

我们需要创建一个包含相关元素和弹窗的HTML页面。假设我们有一组列表项，每个列表项都有一个唯一的ID，当用户点击某个列表项时，会弹出一个确认弹窗。在HTML中，可以这样编写代码：

<ul>
  <li id="item1">项目1</li>
  <li id="item2">项目2</li>
  <li id="item3">项目3</li>
</ul>

接下来，使用JavaScript为列表项添加点击事件监听器。当用户点击列表项时，获取该元素的ID值，并弹出确认弹窗。如果用户点击确认，就将ID值作为链接参数添加到目标页面的URL中，然后实现页面跳转。以下是示例代码：

const items = document.querySelectorAll('li');
items.forEach(item => {
  item.addEventListener('click', function() {
    const id = this.id;
    if (confirm('是否跳转到相关页面？')) {
      window.location.href = `target.html?id=${id}`;
    }
  });
});

在上述代码中，querySelectorAll方法获取所有列表项元素，然后使用forEach方法为每个元素添加点击事件。当用户点击并确认后，通过window.location.href实现页面跳转，并将ID值作为参数传递。

在目标页面（target.html）中，可以通过JavaScript获取传递过来的ID值。例如：

const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get('id');
console.log(id);

通过上述步骤，我们就成功地实现了在弹窗中获取ID值并作为链接参数进行页面跳转的功能。这种方法可以应用于各种场景，如用户选择特定商品后跳转到商品详情页，或者选择某个文章后跳转到文章阅读页等，为用户提供了更加流畅和个性化的交互体验。