JQuery切换函数，JS参数传递

I've made a button with toggle action to display data (show/hide on click).

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

It all works as expected, data is hidden at start because of display: none and then whenever I click on it once it appears, and second click hides the data.

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

Goal: I'm trying to make a polymorphic function with argument name that I would pass so that every different id could use the same function, without repeating the same code over and over again. I'd be very grateful if somebody could steer me in the right direction, I think the answer is pretty easy, just can't see it atm.

目标:我正在尝试使用参数名称创建一个多态函数,以便每个不同的id可以使用相同的函数,而不会一遍又一遍地重复相同的代码。如果有人能指引我朝着正确的方向前进,我会非常感激,我认为答案很简单,就是看不到它。

Problem 1. When I implemented it the way shown below, it requires on the first attempt 3 mouse clicks, and then 2 to perform the action of show/hide.

问题1.当我按照下面显示的方式实现它时,它需要在第一次尝试时单击3次鼠标,然后按2执行show / hide的操作。

<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">

Note: Code without being wrapped inside a function works as expected (1click for every action):

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

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

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

Problem 2. Passing the id correctly to the function.

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

According to code from Problem 1 I've modified the script:

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

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

I've so far been trying to pass the id without success

到目前为止,我一直试图通过id没有成功

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

Hope that this is a clear question.

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

2 个解决方案

#1

To make it more dynamic use the data attribute on button.

要使其更加动态,请使用按钮上的data属性。

HTML:

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

Javascript:

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

#2

Give the button an attribute to indicate which <div> it should be associated with:

为该按钮指定一个属性,以指示它应与哪个

关联:

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

Then your handler can use that attribute to find the element to show:

然后你的处理程序可以使用该属性来查找要显示的元素:

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

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

The data-target attribute value is made available by jQuery via the .data() API.

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

#1