JQuery切換功能，JS參數傳遞

Question

我已經做了一個按鈕，切換動作來顯示數據（點擊顯示/隱藏）。

這一切都按預期工作，因爲display: none開始隱藏數據，然後每當我點擊它，一旦它出現，第二次點擊隱藏數據。

目標：我試圖與參數name一個多態函數，我會通過讓每一個不同的id可以使用相同的功能，無需一遍又一遍重複相同的代碼。如果有人能夠引導我走向正確的方向，我會非常感激，我認爲答案很簡單，只是看不到它。

問題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

爲了使其更具動態性，請使用button上的data屬性。

HTML：

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

的Javascript：

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

Answer 2

給該按鈕的屬性來指示哪個<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提供。