JQuery 切换函数，JS参数传递

Question

我制作了一个带有切换动作的按钮来显示数据（show/hide 点击）。

一切都按预期工作，由于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();
    });
});

JQuery 切换函数，JS参数传递

JQuery toggle function, JS parameter passing

html

javascript

jquery

function

parameter-passing