javascript - jQuery切换函数，JS参数传递

Question

我制作了一个带有切换 Action 的按钮来显示数据(点击时显示/隐藏)。

一切都按预期工作，数据在开始时隐藏，因为 display: none 然后每当我点击它时，一旦它出现，第二次点击隐藏数据。

目标: 我正在尝试创建一个带有参数 name 的多态函数，我将传递该参数以便每个不同的 id 都可以使用相同的功能，无需一遍又一遍地重复相同的代码。如果有人能引导我朝着正确的方向前进，我将不胜感激，我认为答案很简单，只是在 atm 上看不到。

问题 1. 当我按照下面所示的方式实现它时，它需要第一次尝试 3 次鼠标单击，然后 2 次才能执行 显示/隐藏 的操作.

JS

<script>
function show_panel() {
    $(document).ready(function(){
            $("button").click(function(){
                    $("#add_group").toggle(); // div id
            });
    });
}
</script>

HTML

<button onclick="show_panel()">Add group</button>
<div id="add_group" style="display: none">

注意:未包装在函数内的代码按预期工作(每个操作点击 1 次):

<script>
    $(document).ready(function(){
            $("button").click(function(){
                    $("#add_group").toggle();
            });
    });
</script>

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

问题 2. 将 id 正确传递给函数。

根据问题1中的代码，我修改了脚本:

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

到目前为止，我一直在尝试传递 id 但没有成功

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

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

Answer 1

要使其更具动态性，请使用 button 上的 data 属性。

HTML:

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

Javascript:

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