如何使用document.getElementById操作带动态ID的按钮与div的显示状态

实现动态ID拼接的两种常用方案 #

你只需要把ID的固定前缀和动态数值做字符串拼接即可，以下是两种通用实现方式：

方法1：基础字符串拼接（全浏览器兼容）

直接用+运算符拼接固定字符串和动态数值变量即可，示例如下：

// 假设动态数值存储在变量 contactId 中
const contactId = 你要传入的动态ID值;
// 拼接得到目标ID
const delRequestEle = document.getElementById("del_request" + contactId);
// 注意：你的HTML中发送请求按钮的外层div ID前缀是request_btn，不是send_request，不要写错前缀
const sendRequestEle = document.getElementById("request_btn" + contactId);

// 控制显示隐藏示例
delRequestEle.removeAttribute('style'); // 显示拒绝按钮
sendRequestEle.setAttribute('style', 'display:none'); // 隐藏发送请求按钮

方法2：ES6模板字符串（更简洁易读，现代浏览器均支持）

用反引号 ` 包裹整个字符串，通过${变量名}的语法直接插入动态值，不需要手动拼接：

const contactId = 你要传入的动态ID值;
const delRequestEle = document.getElementById(`del_request${contactId}`);
const sendRequestEle = document.getElementById(`request_btn${contactId}`);

实际业务场景示例 #

你可以直接通过按钮自带的data-request-to属性拿到对应的动态ID，不用额外传参，点击切换按钮状态的完整代码如下：

// 发送请求按钮点击事件
document.querySelectorAll('.send_request').forEach(btn => {
  btn.addEventListener('click', function() {
    // 直接从当前点击按钮的data属性取到对应联系人ID
    const contactId = this.dataset.requestTo;
    document.getElementById(`request_btn${contactId}`).setAttribute('style', 'display:none');
    document.getElementById(`del_request${contactId}`).removeAttribute('style');
  })
})

// 拒绝请求按钮点击事件
document.querySelectorAll('.del_request').forEach(btn => {
  btn.addEventListener('click', function() {
    const contactId = this.dataset.requestTo;
    document.getElementById(`del_request${contactId}`).setAttribute('style', 'display:none');
    document.getElementById(`request_btn${contactId}`).removeAttribute('style');
  })
})

注意：你问题中提到的send_request[动态数值]是按钮的类名，实际你写的HTML里外层可操作的div ID前缀是request_btn，拼接的时候不要写错前缀否则会选不到元素。

内容的提问来源于stack exchange，提问作者Muhammad Noman Aslam