点击对应按钮显示关联alert提示框的HTML与JS实现问题求助

问题原因梳理 #

• 原HTML元素未设置对应ID，JS中getElementById无法匹配到目标元素
• 原JS的if判断错误使用赋值运算符=，未使用比较运算符
• getElementById返回单个DOM元素，无法用length属性遍历
• 未建立按钮与提示框的一一对应关系，点击时无法精准匹配目标提示框

修改后完整代码 #

HTML代码 #

<!-- 新增默认样式让提示框初始隐藏，按钮type修改为button避免触发表单提交 -->
<style>
.alert-s {
  display: none;
  /* 可自定义提示框样式 */
  padding: 10px;
  margin: 10px 0;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
}
</style>
<button class="btn-alert btn-success" type="button">delete</button>
<button class="btn-alert btn-success" type="button">delete</button>
<button class="btn-alert btn-success" type="button">delete</button>
<div class="alert-s col-4">第一个按钮对应的提示内容</div>
<div class="alert-s col-4">第二个按钮对应的提示内容</div>
<div class="alert-s col-4">第三个按钮对应的提示内容</div>

JS代码 #

<script>
// 获取所有按钮和所有提示框元素
const btns = document.querySelectorAll('.btn-alert');
const alertBoxes = document.querySelectorAll('.alert-s');

// 遍历绑定点击事件
btns.forEach((btn, index) => {
  btn.addEventListener('click', () => {
    // 隐藏所有提示框
    alertBoxes.forEach(box => box.style.display = 'none');
    // 仅显示当前按钮对应的提示框
    alertBoxes[index].style.display = 'block';

    // 如果需要点击同一按钮切换显示/隐藏，替换上面两行代码为以下内容即可
    // const currentBox = alertBoxes[index];
    // currentBox.style.display = currentBox.style.display === 'block' ? 'none' : 'block';
  })
})
</script>

内容的提问来源于stack exchange，提问作者morteza.jam