如何将点击元素的ID传递给jQuery函数以操作对应元素？

针对你提到的大量带编号的“More...”链接与详情面板的切换需求，这里有几种实用方案，不用为每个元素单独写函数：

方案1：从ID提取编号拼接目标元素 #

利用所有链接和详情Div的ID前缀固定、仅数字不同的规则，通过提取链接ID里的数字来定位对应详情：

修改HTML（给所有链接加统一类名） #

<div id="SomeBlock"> 
  Some text and stuff goes here    
  <a id="MoreDetailsLink1" class="more-link">More...</a>
  <div id="MoreDetailsDiv1" style="display:none;">The rest of story goes here</div>
</div>
<div id="AnotherBlock"> 
  Another text content here    
  <a id="MoreDetailsLink2" class="more-link">More...</a>
  <div id="MoreDetailsDiv2" style="display:none;">Another story content here</div>
</div>

jQuery代码 #

$(document).ready(function(){
  // 给所有带统一类名的链接绑定点击事件
  $('.more-link').click(function(){
    // 获取当前点击链接的ID
    const linkId = $(this).attr('id');
    // 提取ID中的数字部分（去掉前缀"MoreDetailsLink"）
    const numPart = linkId.replace('MoreDetailsLink', '');
    // 拼接对应详情Div的ID
    const targetDiv = `#MoreDetailsDiv${numPart}`;
    // 切换显示/隐藏状态
    $(targetDiv).toggle();
  });
});

方案2：利用DOM结构关系（推荐，无需依赖ID） #

如果详情Div总是紧跟在对应链接的后面，或者两者属于同一个父元素，可以直接通过DOM关系定位，完全不用依赖ID命名：

jQuery代码 #

$(document).ready(function(){
  $('.more-link').click(function(){
    // 直接获取当前链接的下一个兄弟元素（就是对应的详情Div）
    $(this).next().toggle();
  });
});

这种方案最简洁，只要DOM结构不变，就算ID修改也不会影响功能，维护成本最低。

方案3：使用data属性（最灵活） #

给每个链接添加data-target属性，明确指定对应的详情Div的ID，这种方式完全脱离ID命名规则和DOM结构的限制，后期调整更自由：

修改HTML #

<div id="SomeBlock"> 
  Some text and stuff goes here    
  <a id="MoreDetailsLink1" class="more-link" data-target="MoreDetailsDiv1">More...</a>
  <div id="MoreDetailsDiv1" style="display:none;">The rest of story goes here</div>
</div>

jQuery代码 #

$(document).ready(function(){
  $('.more-link').click(function(){
    // 获取data-target属性值，即目标详情Div的ID
    const targetId = $(this).data('target');
    // 切换目标元素的显示状态
    $(`#${targetId}`).toggle();
  });
});

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