如何在jQuery中获取特定元素，实现按钮点击后操作关联DOM元素

嘿，我来帮你搞定这个问题！首先你已经搭好了点击事件的基础框架，现在核心是精准定位到目标元素，再执行你需要的操作就行。

先回顾下你的HTML结构：

<div class="services-article-elements-single">
  <div class="services-article-description">
    <button class="services-article-read-more-btn">read more</button>
  </div>
  <div class="services-article-after-roll"></div>
</div>

还有你已经写好的初始代码：

jQuery('.services-article-read-more-btn').click(() =>{
  // ????????
})

第一步：定位目标元素 #

按钮和.services-article-after-roll同属一个父容器，推荐两种可靠的定位方式：

方式1：通过最近的祖先容器查找（最稳妥，结构微调也不影响）

const targetDiv = $(this).closest('.services-article-elements-single').find('.services-article-after-roll');

closest()会向上找最近的匹配祖先，再用find()锁定目标div，特别适合页面有多个相同结构模块的场景。

方式2：直接找父元素的下一个兄弟（适合当前固定结构）

const targetDiv = $(this).parent().next('.services-article-after-roll');

parent()找到按钮的父容器.services-article-description，next()直接获取它的下一个兄弟节点，就是你要操作的div。

⚠️ 注意：如果用箭头函数，this不会指向点击的按钮，所以建议换成普通函数来绑定事件！

第二步：执行具体操作 #

下面是几种常见操作的示例，你可以按需选用：

示例1：切换目标div的显示/隐藏

jQuery('.services-article-read-more-btn').click(function() {
  const targetDiv = $(this).closest('.services-article-elements-single').find('.services-article-after-roll');
  targetDiv.toggle(); // 一键切换显示/隐藏状态
});

示例2：给目标div添加/移除CSS类

比如添加active类来触发样式变化：

jQuery('.services-article-read-more-btn').click(function() {
  const targetDiv = $(this).closest('.services-article-elements-single').find('.services-article-after-roll');
  targetDiv.toggleClass('active'); // 切换类的存在状态
  // 单独添加：targetDiv.addClass('active');
  // 单独移除：targetDiv.removeClass('active');
});

示例3：修改目标div的内容

jQuery('.services-article-read-more-btn').click(function() {
  const targetDiv = $(this).closest('.services-article-elements-single').find('.services-article-after-roll');
  targetDiv.html('<p>点击按钮后加载的内容来啦！</p>'); // 替换HTML内容
  // 或者添加纯文本：targetDiv.text('这是纯文本内容');
});

示例4：通过AJAX加载外部内容到目标div

jQuery('.services-article-read-more-btn').click(function() {
  const targetDiv = $(this).closest('.services-article-elements-single').find('.services-article-after-roll');
  // 加载指定路径的内容
  targetDiv.load('/path/to/your/content.html', function() {
    // 内容加载完成后的回调操作
    console.log('内容加载完成啦');
  });
});

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