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

我知道这是一个垒球问题，很抱歉，但我需要在.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>

$(document).ready( function() {

    $(".slideToggle").click( function(event) {

         //you will need to show your html in order for me to helo you dynamically show the corresponding panel
    });

});

---

等等。

您可以选择以“详细信息”标题开头的所有ID，并在中单击，选择具有相同后缀的“详细信息”面板：

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

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

如果没有这些，您还可以提供Header和panels类，而不是多个不同的ID：

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

---

首先，您只需要使用一个文档就绪功能，里面的所有内容都将等待页面加载，不需要像现在这样包含两次

第二，从id切换到类如果你给所有需要click处理程序附加到它的按钮一个相同的类，那么你可以只声明它一次，它将附加到这个类的所有元素上

所以它可以看起来像这样：

<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>

$(document).ready( function() {

    $(".slideToggle").click( function(event) {

         //you will need to show your html in order for me to helo you dynamically show the corresponding panel
    });

});

根据HTML的结构，您需要使用一些jquery来查找根据单击事件显示的相应面板。

尝试如下：

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

---

如果你有合理的HTML结构，你可以利用这一优势。由于您没有给我们任何信息，我将提供一个通用示例

$document.readyfunction{ //与此语法一起使用，以便动态添加任何节 //还有事件处理者 $.details.onclick、.detailsHeader、函数{ //获取详细信息部分父/祖先 让parent=$this.closest.detailsSection； //现在切换孩子 $parent.find.detailsBody.slideToggle； }; }; 标题1 详情正文1 标题2 详情正文2

---

您可以发布详细信息标题的HTML，并且详细信息面板显示它们在DOM中彼此的位置吗？您可以发布HTML吗？您只需要一个$document.ready。为什么不拥有一个html类属性，您可以使用$'.detailsHeader'.eachfunctioni，e{var h=$e；h.clickfunction{h.find'.detailspan'.slideToggle'slow'；}；}；？枚举属性、变量。。。无论什么，通常都是你做错了事情的迹象；那应该是一张清单。如果你展示你的标记，我们可能根本就不需要ID，而只使用classes=>JS中的一个函数来处理所有发生的事情。除此之外，你的格式很糟糕，谢谢！我会在一分钟后发布html，我只需要把它放在一起…好的，我刚刚用html更新了原始帖子。抱歉耽搁了！我现在猜这不是一个“正确”的方法，但这是我一直在寻找的…谢谢。我认为这是正确的方法之一。如果这满足您的需要，请标记为已接受。或者如果有其他更好的衣服，那就标记一下。