Javascript 如何将页面上的多个j query脚本合并为一个？

我的页面中有八个单独的脚本，可以将slideToggle（）行为添加到八个不同的元素中。是否需要将它整合到一个脚本中，这样就不会严重影响页面加载时间

<div id="proficiencies_holder">
    <div id="proficiencies_menu">
        [insert_php] 
            $args = array('category_name'=>'competencies-and-domains','posts_per_page'=> -1);
            $query = new WP_Query($args);
            $i = 0;
            while($query->have_posts()):
                $i+=1;
                $query->the_post();
                $div_image = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()),'full');
                echo '<div class="prof_menu_item_holder">';
                echo '<div id="prof_button'.$i.'"class="prof_menu_item custom-parallax"style="background-image: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),url('.$div_image[0].')">';
                echo get_the_title();
                echo '</div>';
                echo '<div id="par_tab'.$i.'">';
                echo get_the_content();
                echo '</div>';
                echo '</div>';
                echo '<script>$(document).ready(function(){$("#prof_button'.$i.'").click(function(){$("#par_tab'.$i.'").slideToggle();});});</script>';
            endwhile;
        [/insert_php]
    </div>
</div>

[插入]
$args=array（'category\u name'=>'capabilities-and-domains'，'posts\u per\u page'=>-1）；
$query=新的WP\u查询（$args）；
$i=0；
而（$query->have_posts（））：
$i+=1；
$query->the_post（）；
$div_image=wp_get_attachment_image_src（get_post_缩略图_id（get_id（）），'full'）；
回声'；
回声'；
echo获取标题（）；
回声'；
回声'；
echo获取内容（）；
回声'；
回声'；
回显“$（文档）.ready（函数（）{$（“#prof_按钮“$i.””）。单击（函数（）{$（“#par_选项卡“$i.””）。滑动切换（）；}）；
结束时；
[/insert_php]

为什么不使用类？例如：prof_按钮和par_选项卡

$(document).ready(function(){
     $(".prof_button").click(function(){
          $(this).next('.par_tab').slideToggle();
     });
});

---

演示：

为什么不使用类？例如：prof_按钮和par_选项卡

$(document).ready(function(){
     $(".prof_button").click(function(){
          $(this).next('.par_tab').slideToggle();
     });
});

---

演示：

如果我使用类，如果我单击任何一个按钮，每个div都会被切换。它们都链接到一个特定的内容div。并非每个div都将切换到下一个被单击的div，您有

$（这个）。下一个（'.par_tab'）。slideToggle（）我在AnswerOHH ok中添加了一个演示，因此如果我使用.next（），它将只应用于页面上该类的下一个元素。谢谢你的笑声；我仍在努力学习jquery。请查看本例中的文档
$（this）.next（'.par_tab'）。slideToggle（）
-使用class
par_选项卡切换下一个div（下一个与单击的div相关），如果我使用class，如果我单击任何一个按钮，每个div都将被切换。它们都链接到一个特定的内容div。并非每个div都将切换到下一个被单击的div，您有
$（这个）。下一个（'.par_tab'）。slideToggle（）我在AnswerOHH ok中添加了一个演示，因此如果我使用.next（），它将只应用于页面上该类的下一个元素。谢谢你的笑声；我仍在努力学习jquery。请查看本例中的文档
$（this）.next（'.par_tab'）。slideToggle（）-使用class
par_选项卡切换下一个div（下一个与单击的div相关）