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

Question

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

$(".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

如果所有按钮都有一个共同的 class，select 即 class 并添加一个利用 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 - 相反，只使用其中的一个 class，例如：

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

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

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

How to consolidate Jquery selectors for duplicate functions?

html

jquery

css

function

jquery-selectors