Javascript 如何简化重复函数

我是编程新手，并试图简化一些jquery/javascript代码，但我没有取得多少成功。我尝试调整此处找到的解决方案：

……但同样没有成功

以下是我的jquery代码：

<script>
$(document).ready(function(){

$("#hide01").click(function(){
$(".content01").hide();
});

$("#show01").click(function(){
$("p").hide();
$(".content01").show();
});

$("#hide02").click(function(){
$(".content02").hide();
});

$("#show02").click(function(){
$("p").hide();
$(".content02").show();
});

});
</script>

以及HTML：

<button id="hide01">Hide</button>
<button id="show01">Show</button>

<button id="hide02">Hide</button>
<button id="show02">Show</button>

<p class="content01">Content 01</p>

<p class="content02">Content 02</p>

这个解决方案是可行的，但我需要像40个按钮/块的内容

---

有人能帮忙吗？谢谢

使用jQuery，您可以堆叠选择器，例如：

 $("#hide01, #show01").click(function(){
    $(".content01").hide();
 });

但就我个人而言，我宁愿使用一个类，而不是使用ID：

  <button id="hide01" class="hide">Hide</button>
  <button id="show01" class="show">Show</button>
  <button id="hide02" class="hide">Hide</button>
  <button id="show02" class="show">Show</button>
  <button id="hide03" class="hide">Hide</button>
  <button id="show04" class="show">Show</button>

---

我会将HTML更改为：

<button class="btn_hide" data-id="01">Hide</button>
<button class="btn_show" data-id="01">Show</button>

<button class="btn_hide" data-id="02">Hide</button>
<button class="btn_show" data-id="02">Show</button>

<p id="content01">Content 01</p>
<p id="content02">Content 02</p>

---

请问codereview和stackoverflow有什么不同？使用CSS类属性；给隐藏按钮一个类，给显示按钮一个不同的类。为每个按钮显示/隐藏一个数据值，该值等于其对应的ID。如果没有其他内容，您可以使用jQuery来实现一致性，而不是this.getAttribute。或者只给按钮实际id？@ajp15243使用实际id是行不通的，因为它们需要是唯一的，数据id属性的要点是用页面上的单个元素连接多个按钮。更不用说使用this.getAttribute可以节省jQuery函数的开销。@AnthonyGrist没有仔细考虑数据id的值不是唯一使用的这一事实。我知道使用jQuery函数会增加一些开销，但几乎不会。看起来最容易阅读的方式将是清晰和未来维护的最佳选择。就我个人而言，我会选择.data，但OP可以为自己的代码做出选择。好的，我想我理解代码，但由于某些原因，当我复制粘贴它时，按钮不起作用…哎呀！好的，我明白我的意思。忘记添加$document.readyfunction。一切都很好！谢谢！

<button class="btn_hide" data-id="01">Hide</button>
<button class="btn_show" data-id="01">Show</button>

<button class="btn_hide" data-id="02">Hide</button>
<button class="btn_show" data-id="02">Show</button>

<p id="content01">Content 01</p>
<p id="content02">Content 02</p>

$(".btn_hide").click(function() {
    $("#content"+this.getAttribute("data-id")).hide();
});
$(".btn_show").click(function() {
    $("p").hide();
    $("#content"+this.getAttribute("data-id")).show();
});