如何为多个audio元素设置唯一ID以通过jQuery播放

方案一：利用ColdFusion生成唯一ID（从根源规范解决） #

由于你的页面是ColdFusion动态渲染的，直接在生成阶段给每个按钮和音频元素分配唯一ID，彻底避免ID重复问题：

修改后的ColdFusion HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<td>
  <a class="btn btn-sm btn-success btn_player" id="player_#voc_id#">foo
    <audio id="audio_#voc_id#">
      <src="./assets/vocab/#formation_id#/5/#voc_cat_id#/word_#voc_id#_#formation_id#_5.mp3" type="audio/mp3">
    </audio>
    <i class="fad fa-play"></i>
  </a>
</td>

<!-- 其余td模块同理，会自动生成如player_101、audio_101的唯一ID -->

对应jQuery代码 #

$('.btn_player').click(function(event) {
  event.preventDefault();
  // 从按钮ID中提取唯一标识
  var btnId = $(this).attr("id");
  var uniqueId = btnId.split("_")[1];
  // 定位对应音频并播放
  document.getElementById(`audio_${uniqueId}`).play();
});

方案二：无需修改ID，通过DOM关系直接定位音频（更简洁） #

每个播放按钮和对应的audio是嵌套关系，直接通过DOM遍历找到目标元素，完全不用依赖ID：

修改后的jQuery代码 #

$('.btn_player').click(function(event) {
  event.preventDefault();
  console.log('button audio player clicked');
  // 找到当前点击按钮下的音频元素并播放
  $(this).find('audio').get(0).play();
});

说明 #

• 此方案无需修改任何HTML代码，直接替换原有JS即可生效
• $(this)指向当前被点击的按钮，.find('audio')定位按钮内部的音频元素，.get(0)转换为原生DOM对象后调用播放方法

额外注意事项 #

1. 原JS代码中存在重复声明var idtemp的问题，且按钮ID为player无下划线，执行split("_")会得到["player"]，取idtemp[1]会返回undefined，这部分逻辑无效，建议删除
2. HTML规范强制要求ID唯一，即使方案二可以绕开ID问题，生产环境中仍建议保证元素ID的唯一性，避免其他潜在兼容问题

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