如何合并功能重复的jQuery选择器，简化重复的事件绑定代码

现存问题说明 #

• 代码中$("this")为错误用法：引号包裹后会被识别为标签选择器，查找页面中名为this的标签，正确写法为$(this)，可直接指向当前触发点击事件的按钮元素。
• 直接使用$(".servicedescriptionX")为全局选择器，会匹配页面中所有对应类的元素，需要通过DOM遍历定位当前按钮所属区块内的描述元素，不需要给每个元素分配独立编号类。

1. 简化并汉化HTML结构（推荐，更易维护） #

所有描述区块无需单独编号，统一使用公共类servicedescription即可：

<div class="services">
  <div class="servicenode">
    <button type="button">></button>
    <p class="servicetitle">树木移除</p>
    <p class="servicedescription servicedescriptionhide">无论需求规模大小，我们都具备对应的工具与专业经验满足您的要求</p>
    <img class="a beforetoggle" src = "images/beforeafter/treeremovalflip_300x400.jpg">
  </div>

  <div class="servicenode">
    <button type="button">></button>
    <p class="servicetitle">树木修剪</p>
    <p class="servicedescription servicedescriptionhide">无论需求规模大小，我们都具备对应的工具与专业经验满足您的要求</p>
    <img class="b beforetoggle" src = "images/beforeafter/treetrimmingflip_300x400.jpg">
  </div>

  <div class="servicenode">
    <button type="button">></button>
    <p class="servicetitle">树桩研磨</p>
    <p class="servicedescription servicedescriptionhide">无论需求规模大小，我们都具备对应的工具与专业经验满足您的要求</p>
    <img class="c beforetoggle" src = "images/beforeafter/stumpgrindingflip_300x400.jpg">
  </div>

  <div class="servicenode">
    <button type="button">></button>
    <p class="servicetitle">绿篱修剪</p>
    <p class="servicedescription servicedescriptionhide">无论需求规模大小，我们都具备对应的工具与专业经验满足您的要求</p>
    <img class="d beforetoggle" src = "images/beforeafter/hedgetrimmingflip300x400.jpg">
  </div>

  <div class="servicenode">
    <button type="button">></button>
    <p class="servicetitle">果树修枝</p>
    <p class="servicedescription servicedescriptionhide">无论需求规模大小，我们都具备对应的工具与专业经验满足您的要求</p>
    <img class="e beforetoggle" src = "images/beforeafter/fruittreeflip_300x400.jpg">
  </div>

  <div class="servicenode">
    <button type="button">></button>
    <p class="servicetitle">木材与灌木清理</p>
    <p class="servicedescription servicedescriptionhide">无论需求规模大小，我们都具备对应的工具与专业经验满足您的要求</p>
    <img class="f beforetoggle" src = "images/beforeafter/treeremovalflip300x400.png">
  </div>

  <div class="servicenode">
    <button type="button">></button>
    <p class="servicetitle">场地清整</p>
    <p class="servicedescription servicedescriptionhide">无论需求规模大小，我们都具备对应的工具与专业经验满足您的要求</p>
    <img class="g beforetoggle" src = "images/beforeafter/lotclearingflip300x400.jpg">
  </div>

  <div class="servicenode">
    <button type="button">></button>
    <p class="servicetitle">树木钢索支撑加固</p>
    <p class="servicedescription servicedescriptionhide">无论需求规模大小，我们都具备对应的工具与专业经验满足您的要求</p>
    <img class="h beforetoggle" src = "images/beforeafter/cablingbracingflip_300x400.jpg">
  </div>

  <div class="servicenode">
    <button type="button">></button>
    <p class="servicetitle">风暴灾害修复</p>
    <p class="servicedescription servicedescriptionhide">无论需求规模大小，我们都具备对应的工具与专业经验满足您的要求</p>
    <img class="i beforetoggle" src = "images/beforeafter/stormdamageflip_300x400.jpg">
  </div>
</div>

2. 统一JS逻辑（仅需1段，替代所有重复的9段点击事件） #

$(".servicenode > button").click(function(){
    // 精准定位当前按钮所属服务区块内的描述元素
    $(this).siblings(".servicedescription").toggleClass('servicedescriptionhide servicedescriptionshow');
    // 仅给当前点击的按钮切换旋转样式
    $(this).toggleClass('buttonrotate');
});

如果你不想修改原有带编号的HTML结构，可直接使用以下兼容代码，无需调整HTML即可生效：

$(".servicenode > button").click(function(){
    // 匹配当前区块下所有带servicedescription前缀的元素
    $(this).parent().find('[class*="servicedescription"]').toggleClass('servicedescriptionhide servicedescriptionshow');
    $(this).toggleClass('buttonrotate');
});

• $(this)直接指向当前触发点击的按钮，仅操作当前按钮不会影响其他按钮
• 通过siblings()查找同级元素、或parent()先定位父服务区块再find()子元素的方式，精准匹配当前区块内的描述内容，不会触发其他区块的显隐逻辑

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