如何从不同图片元素获取唯一alt值实现电影名跨页传递

返回值固定为第一部电影名称的核心原因有两个：

• HTML规范要求id属性必须在全页面唯一，你给所有电影海报img都设置了相同的id="a"，属于不符合规范的错误写法
• document.getElementById('a')执行时，永远只会匹配页面上第一个id为a的元素，和你点击的是哪个购票按钮没有任何关联，自然拿不到对应项的正确值

全程只需要改两处，一个通用函数就能覆盖所有14部电影的取值需求，不需要给每个电影单独写逻辑：

1. 删掉所有img标签上重复的id="a"属性，重复id本身没有任何存在的必要
2. 改造getMovieName()函数，基于点击事件的上下文定位当前所属的列表项，只在当前项范围内查找img拿alt值，避免全局查找匹配到第一个元素

修正后的HTML结构参考 #

所有li项保持统一结构即可，不需要给每个元素加单独标识：

<div class="now-showing">
  <ul class="movie-items">
    <li>
      <img src="poster1.jpg" alt="流浪地球2">
      <a href="./ticket.html" onclick="return getMovieName(event)">购票</a>
    </li>
    <li>
      <img src="poster2.jpg" alt="满江红">
      <a href="./ticket.html" onclick="return getMovieName(event)">购票</a>
    </li>
    <!-- 其余12个电影li结构和上面完全一致，不需要额外调整 -->
  </ul>
</div>

通用JS函数实现 #

function getMovieName(event) {
  // 先阻止a标签默认跳转，等拿到电影名再执行跳转
  event.preventDefault();
  // 定位当前点击的购票按钮所属的li容器
  const currentMovieItem = event.target.closest('li');
  // 只在当前li容器内查找海报img，不会匹配到其他电影的海报
  const poster = currentMovieItem.querySelector('img');
  const movieName = poster.alt;

  // 把电影名传递到下一页，两种方式选一个即可
  // 方式1：拼接到URL参数中，下一页通过解析URL search字段拿值
  window.location.href = event.target.href + `?name=${encodeURIComponent(movieName)}`;
  // 方式2：存入本地存储，下一页直接读取对应字段
  // localStorage.setItem('selectedMovie', movieName);
  // window.location.href = event.target.href;
}

提示：如果需要兼容IE11及更早的浏览器，把closest('li')替换为循环向上查找父节点直到匹配li的逻辑即可，现代浏览器全量支持该API，不需要额外兼容。

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