如何根据子元素动态值定位页面特定区块？（含PHP/JS代码场景）

首先，咱们先梳理下你原代码里的几个问题：

• 你用了document.getElementById('location_id_el')，但location_id_el是元素的class而非id，而且页面是循环生成的，存在多个同class的元素，getElementById只能获取单个元素，完全不适用这里。
• <p>标签没有value属性，要获取里面的ID值，得用textContent或者innerText。
• 用document.location.href是跳转到某个URL，没法定位到页面内的元素，咱们需要用DOM元素的scrollIntoView()方法来实现页面内滚动定位。

下面是修正后的完整解决方案：

第一步：修正JavaScript函数 #

这个函数会根据你传入的目标ID，找到对应的区块并滚动定位，还可以添加高亮效果方便识别：

function myNavFunction(targetId) {
  // 获取所有包含location ID的元素（因为是循环生成的，所以用querySelectorAll）
  const locationElements = document.querySelectorAll('.location_id_el');
  
  // 遍历所有元素，找到匹配目标ID的那个
  for (const el of locationElements) {
    // 把文本内容转成数字，避免字符串和数字比较的坑（比如'4'和4）
    const currentId = parseInt(el.textContent.trim(), 10);
    if (currentId === targetId) {
      // 向上查找最近的.block父元素（这就是你要定位的目标区块）
      const targetBlock = el.closest('.block');
      if (targetBlock) {
        // 平滑滚动到该区块，让它居中显示在视口
        targetBlock.scrollIntoView({ behavior: 'smooth', block: 'center' });
        
        // 可选：给定位到的区块加高亮样式（需要配合CSS）
        targetBlock.classList.add('highlighted');
        
        // 可选：移除其他区块的高亮，只保留当前目标
        locationElements.forEach(otherEl => {
          const otherBlock = otherEl.closest('.block');
          if (otherBlock !== targetBlock) {
            otherBlock.classList.remove('highlighted');
          }
        });
        break;
      }
    }
  }
}

// 使用示例：比如要定位ID为4的区块，直接调用即可
myNavFunction(4);

第二步：添加高亮样式（可选） #

如果需要高亮显示定位到的区块，在CSS里添加下面的样式：

.highlighted {
  border: 2px solid #2196F3; /* 蓝色边框 */
  background-color: rgba(33, 150, 243, 0.1); /* 淡蓝色背景 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

额外修正：PHP代码里的小问题 #

你的PHP代码中，edit_button_request的参数传递有语法错误，json_encode生成的是字符串，需要用echo输出，否则onclick事件会报错：

<!-- 原代码 -->
<span onclick="edit_button_request(<?php json_encode($cards); ?>)"><i class='fas fa-edit'></i></span>

<!-- 修正后 -->
<span onclick="edit_button_request(<?php echo json_encode($cards); ?>)"><i class='fas fa-edit'></i></span>

这样调用myNavFunction(4)后，页面就会平滑滚动到ID为4的location对应的.block区块啦～

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