根据H1标签文本切换指定P标签内容的JS问题求助

你的代码存在两个核心问题：

1. 条件判断逻辑错误：你把'h1:contains("Red")'这类字符串直接作为if条件，而JavaScript中任何非空字符串都会被判定为true，所以第一个if分支永远会触发，后面的else if完全没有执行机会。
2. 语法误用：:contains是jQuery专属的选择器语法，原生JavaScript并不支持这个写法。

下面是两种可行的修正方案：

方案一：修正if/else逻辑（原生JS） #

先获取H1的文本内容，用原生字符串方法检查是否包含目标关键词，同时确保代码在DOM加载完成后执行（因为你要把代码放在<head>里，提前执行会找不到页面元素）：

<h1>This is about Red</h1>
<p id="colour"></p>

<script>
// 等待页面DOM加载完成后执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 获取H1的文本并去除两端空白
  const h1Content = document.querySelector('h1').textContent.trim();
  const targetPara = document.getElementById('colour');

  if (h1Content.includes('Red')) {
    targetPara.innerHTML = "Red description";
  } else if (h1Content.includes('Orange')) {
    targetPara.innerHTML = "Orange description";
  } else if (h1Content.includes('Green')) {
    targetPara.innerHTML = "Green description";
  } else if (h1Content.includes('Blue')) {
    targetPara.innerHTML = "Blue description";
  }
});
</script>

方案二：用对象映射简化代码（更易维护） #

如果后续需要新增更多颜色，这种方式不需要修改条件判断，只需要在对象里添加键值对即可：

<h1>This is about Orange</h1>
<p id="colour"></p>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const h1Content = document.querySelector('h1').textContent.trim();
  const targetPara = document.getElementById('colour');

  // 存储颜色关键词与对应描述的映射关系
  const colourMap = {
    Red: "Red description",
    Orange: "Orange description",
    Green: "Green description",
    Blue: "Blue description"
  };

  // 遍历映射对象，匹配关键词
  for (const [colour, desc] of Object.entries(colourMap)) {
    if (h1Content.includes(colour)) {
      targetPara.innerHTML = desc;
      break; // 找到匹配后立即终止循环
    }
  }
});
</script>

关键说明 #

• DOMContentLoaded事件：确保代码在页面所有DOM元素加载完成后执行，避免放在<head>中时找不到H1和P标签的问题。
• textContent.trim()：获取H1的纯文本内容，并去除两端的空白字符，避免因空格导致匹配失败。
• includes()：原生JavaScript的字符串方法，用于检查字符串是否包含指定子串，完全替代jQuery的:contains功能。

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