jQuery切换功能，JS参数传递

Question

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

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

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

问题1.当我按照如下所示的方式实现它时，它需要在第一次尝试3次鼠标点击，然后2次执行show/hide的动作。

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

给按钮一个属性来表明它应该与哪个<div>相关联：

<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();
  });
});

data-target 属性值由 jQuery 通过.data() API 提供。

Answer 2

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

HTML：

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

Javascript：

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