Javascript JQuery切换函数，JS参数传递

我制作了一个带有切换动作的按钮来显示数据（单击时显示/隐藏）

这一切都按预期工作，数据在开始时隐藏，因为

display:none

，然后每当我单击它出现时，第二次单击会隐藏数据

目标：我正在尝试创建一个带有参数

name

的多态函数，我将传递该参数，这样每个不同的

id

都可以使用相同的函数，而不必反复重复相同的代码。如果有人能把我引向正确的方向，我会非常感激，我认为答案很简单，只是看不到而已

问题1。当我以下面所示的方式实现它时，第一次尝试时需要单击3次鼠标，然后单击2次以执行

显示/隐藏

的操作

JS

到目前为止，我一直试图通过

id

，但没有成功

<button onclick="show_panel('add_group')"> ...
<button onclick="show_panel("add_group")"> ...
<button onclick="show_panel(add_group)"> ...

。。。
...
...

---

希望这是一个明确的问题。

给按钮一个属性，以指示它应该与哪个

关联：

<button class="show-stuff" data-target="add_group">Add Group</button>

---

jQuery通过

.data（）

API提供

数据目标

属性值。

要使其更加动态，请使用

按钮上的
数据
属性

HTML:

我试着用这个，但没有成功。此外，这与我迄今为止所能产生的代码完全不同：）@ConsiderMe很不幸，我根本不知道你的意思。这在什么方面不起作用？有错误吗？您只需要使用这么多代码，删除旧代码。我的意思是，这个函数没有附加名称。@ConsiderMe无需将代码保留在函数中。这类似于调用函数
onclick
，但有以下更好的做法。@请考虑是的，这是匿名函数，每次单击按钮都会调用它
<script>
    $(document).ready(function(){
            $("button").click(function(){
                    $("#add_group").toggle();
            });
    });
</script>

<button">Add group</button>
<div id="add_group" style="display: none">

Line 2: function show_panel(name) {
Line 5: $("#".concat(name)).toggle(); // name is the div id I want to pass

<button onclick="show_panel('add_group')"> ...
<button onclick="show_panel("add_group")"> ...
<button onclick="show_panel(add_group)"> ...

<button class="show-stuff" data-target="add_group">Add Group</button>

$(function() {
  $(".show-stuff").click(function() {
    var clicked = this, $clicked = $(clicked), target = $clicked.data("target");

    $("#" + target).toggle();
  });
});

<button data-id="add_group"> Add Group </button>

$(document).ready(function() {
    $('button').on('click', function() {
        $('#' + $(this).data('id')).toggle();
    });
});