如何为重复函数合并 Jquery 选择器？

Question

我的 HTML 代码中有 9 个“服务节点”div，每个都有一个隐藏的 div 和一个可以单击的按钮。单击按钮时，它会旋转 45 度并导致隐藏的 div 弹出。问题是，到目前为止，我只能通过为每个服务节点 div 重复相同的功能同时给它一个任意类来做到这一点，否则当我单击其中一个时，所有按钮和 div 都会移动。我一直在尝试通过使用按钮旋转的“this”选择器来清理它，并使用父>子选择器而不是每个按钮的任意类。我正在努力解决的问题是toggleClass 的“servicedescription”选择器，它不适用于“this”，因为我单击的元素是按钮，而不是隐藏的div。以下是当前代码，我目前所做的更改仅适用于第一个 servicenode 函数。

$(".servicenode > Button").click(function(){
    $(".servicedescription1").toggleClass('servicedescriptionhide servicedescriptionshow');
    $("this").toggleClass('buttonrotate');
  });
   
  $(".button2").click(function(){
    $(".servicedescription2").toggleClass('servicedescriptionhide servicedescriptionshow');
    $(".button2").toggleClass('buttonrotate');
  });
  
  $(".button3").click(function(){
    $(".servicedescription3").toggleClass('servicedescriptionhide servicedescriptionshow');
    $(".button3").toggleClass('buttonrotate');
  });
  
  $(".button4").click(function(){
    $(".servicedescription4").toggleClass('servicedescriptionhide servicedescriptionshow');
    $(".button4").toggleClass('buttonrotate');
  });
  
  $(".button5").click(function(){
    $(".servicedescription5").toggleClass('servicedescriptionhide servicedescriptionshow');
    $(".button5").toggleClass('buttonrotate');
  });
  
  $(".button6").click(function(){
    $(".servicedescription6").toggleClass('servicedescriptionhide servicedescriptionshow');
    $(".button6").toggleClass('buttonrotate');
  });
  
  $(".button7").click(function(){
    $(".servicedescription7").toggleClass('servicedescriptionhide servicedescriptionshow');
    $(".button7").toggleClass('buttonrotate');
  });
  
  $(".button8").click(function(){
    $(".servicedescription8").toggleClass('servicedescriptionhide servicedescriptionshow');
    $(".button8").toggleClass('buttonrotate');
  });
  
  $(".button9").click(function(){
    $(".servicedescription9").toggleClass('servicedescriptionhide servicedescriptionshow');
    $(".button9").toggleClass('buttonrotate');
  });

<div class="services">
 
  
  <div class="servicenode"><button class="button1" type="button">></button><p class="servicetitle">Tree Removal</p><p class="servicedescription1 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="a beforetoggle" src = "images/beforeafter/treeremovalflip_300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="button2" type="button">></button><p class="servicetitle">Tree Trimming</p><p class="servicedescription2 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="b beforetoggle" src = "images/beforeafter/treetrimmingflip_300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="button3" type="button">></button><p class="servicetitle">Stump Grinding</p><p class="servicedescription3 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="c beforetoggle" src = "images/beforeafter/stumpgrindingflip_300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="button4" type="button">></button><p class="servicetitle">Hedge Trimming</p><p class="servicedescription4 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="d beforetoggle" src = "images/beforeafter/hedgetrimmingflip300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="button5" type="button">></button><p class="servicetitle">Fruit Tree Pruning</p><p class="servicedescription5 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="e beforetoggle" src = "images/beforeafter/fruittreeflip_300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="button6" type="button">></button><p class="servicetitle">Wood & Brush Removal</p><p class="servicedescription6 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="f beforetoggle" src = "images/beforeafter/treeremovalflip300x400.png">
  </div>
  
  <div class="servicenode"><button class="button7" type="button">></button><p class="servicetitle">Lot Clearing</p><p class="servicedescription7 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="g beforetoggle" src = "images/beforeafter/lotclearingflip300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="button8" type="button">></button><p class="servicetitle">Cabling & Bracing</p><p class="servicedescription8 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="h beforetoggle" src = "images/beforeafter/cablingbracingflip_300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="button9" type="button">></button><p class="servicetitle">Storm Damage</p><p class="servicedescription9 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="i beforetoggle" src = "images/beforeafter/stormdamageflip_300x400.jpg">
  </div>
 
 </div>

Answer 1

如果所有按钮都有一个公共类，请选择该类并添加一个点击侦听器，该侦听器利用this（侦听器附加到的元素）动态导航到其兄弟元素。

使用此 HTML：

<div class="servicenode">
  <button class="mybutton" type="button">></button>
  <p class="servicetitle">Tree Removal</p>
  <p class="servicedescription servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="a beforetoggle" src="images/beforeafter/treeremovalflip_300x400.jpg">
</div>

你可以的

$(.mybutton').click(function() {
  $(this)
    .siblings('.servicedescription')
    .toggleClass('servicedescriptionhide servicedescriptionshow');
  $(this).toggleClass('buttonrotate');
});

对于所有这样的.servicenodes。

我建议不要同时拥有 servicedescriptionhide servicedescriptionshow - 相反，只有这些类中的 一个，例如：

.servicedescription {
  /* properties for servicedescriptionshow */
}
.servicedescription.hide {
  /* properties for servicedescriptionhide */
}

这将使您的 JS 更容易，并使 HTML 和 JS 的重复性降低。