javascript - 我需要重复多少 javascript jquery 代码？

Question

我知道这是一个垒球问题，很抱歉，但是我需要在 .js 脚本文件中重复多少 jquery 代码？ (我是编码和自学新手!)

这是我所拥有的，我需要使用 ID 一次打开一个不同的面板。但这其中的某些部分是多余的吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

$(document).ready
     (function()
         {$("#details-header-1").click
           (function()
              {$("#details-panel-1").slideToggle("slow");}
            );
          }
           );

$(document).ready
         (function()
             {$("#details-header-2").click
               (function()
                  {$("#details-panel-2").slideToggle("slow");}
                );
              }
           );

等等...

HTML 看起来像这样:

<div id="details-header-1">Click to slide the panel down or up</div>
<div id="details-panel-1">Hello world!</div>

<div id="details-header-2">Click to slide the panel down or up</div>
<div id="details-panel-2>Hello world!</div>

等等...

Answer 1

您可以选择以 details-header 开头的所有 ID，并在 .click 内选择具有相同内容的 details-panel后缀:

$(document).ready(function() {
  $([id^="details-header]").click(function() {
    const num = this.id.match(/\d+$/)[0];
    $(`.details-panel-${num}`).slideToggle("slow");
  });
});

可能有一个更加更优雅的解决方案，但是如果没有看到 HTML 就很难说。

缺少这一点，您还可以为标题和面板提供类，而不是多个不同的 ID:

$(document).ready(function() {
  const headers = $('.details-header');
  const panels = $('.details-panel');
  headers.click(function() {
    const index = headers.index(this);
    $(panels[index]).slideToggle("slow");
  });
});