jQuery：如何在准备好文档上递归分配按钮？

Question

我有多个按钮和表格，我想将每个按钮ID递归地分配给各自的表格ID。

对于每个按钮，该功能应有助于我切换各自的表格。 单击按钮1（“＃showHide01”）将切换表1（“＃table01”）。

 // Working function /* $(function() { $("#showHide01").on("click", function() { $("#table01 tbody").toggle(); }); }); */ var buttonList = ["#showHide01","#showHide02a","#showHide02b","#showHide03a","#showHide03b","#showHide04"]; var tableList = ["#table01 tbody","#table02a tbody","#table02b tbody","#table03a tbody","#table03b tbody","#table04 tbody"] $(function() { var i = 0, len = buttonList.length; for (i; i < len; i+=1) { $(buttonList[i]).on("click", function() { $(tableList[i]).toggle(); }); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <button class="btn btn-info" id="showHide01">Show/hide table</button> <table id="table01"> <thead> <tr> <th>Id</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table> <button class="btn btn-info" id="showHide02a">Show/hide table</button> <table id="table02a"> <thead> <tr> <th>Id</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table> <button class="btn btn-info" id="showHide02b">Show/hide table</button> <table id="table02b"> <thead> <tr> <th>Id</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table> <button class="btn btn-info" id="showHide03a">Show/hide table</button> <table id="table03a"> <thead> <tr> <th>Id</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table> <button class="btn btn-info" id="showHide03b">Show/hide table</button> <table id="table03b"> <thead> <tr> <th>Id</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table> <button class="btn btn-info" id="showHide04">Show/hide table</button> <table id="table04"> <thead> <tr> <th>Id</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table> 

我怎样才能解决这个问题？ 谢谢！

Answer 1

您可以做的是为所有<buttons> 分配一个类，并使用data属性来分隔哪个按钮切换哪个表。 这样，您可以为所有按钮创建一个单一绑定，并获取要系统切换的表的ID。

基本上它会去的html ：

<button class="btn btn-info js_toggle-table" data-table-id="table01">Show/hide table</button>
<table id="table01">

而javascript / jquery将是：

$(".js_toggle-table").on("click", function(el) {
  var tableIdSelector = "#" + $(el.target).data('table-id');
  $(tableIdSelector).toggle(); 
});

检查更新的代码段：

 $(".js_toggle-table").on("click", function(el) { var tableIdSelector = "#" + $(el.target).data('table-id'); $(tableIdSelector).toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <button class="btn btn-info js_toggle-table" data-table-id="table01">Show/hide table 01</button> <table id="table01"> <thead> <tr> <th>Table 1</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table> <button class="btn btn-info js_toggle-table" data-table-id="table02a">Show/hide table 02a</button> <table id="table02a"> <thead> <tr> <th>Table 02a</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table> <button class="btn btn-info js_toggle-table" data-table-id="table02b">Show/hide table 02b</button> <table id="table02b"> <thead> <tr> <th>Table 2 b</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table> <button class="btn btn-info js_toggle-table" data-table-id="table03a">Show/hide table 3 a</button> <table id="table03a"> <thead> <tr> <th>Table 3 a</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table> <button class="btn btn-info js_toggle-table" data-table-id="table03b">Show/hide table 3 b</button> <table id="table03b"> <thead> <tr> <th>Table 3 b</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table> <button class="btn btn-info js_toggle-table" data-table-id="table04">Show/hide table 4</button> <table id="table04"> <thead> <tr> <th>Table 4</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table> 

干杯!

编辑：我更改了按钮和表的名称，以使单击按钮时清楚消失的是哪一个。

Answer 2

向每个按钮添加一个类（例如“切换按钮”）：

<button class="btn btn-info toggle-button" id="showHide04">Show/hide table</button>

然后，您可以使用以下脚本：

$(".toggle-button").click(function() {
  $(this).next().find("tbody").toggle(); 
});

Answer 3

为了使代码正常工作，您必须使用闭包将i的副本保持为当前值。 该页面对您遇到的问题进行了一些演练。 http://www.mennovanslooten.nl/blog/post/62

 var buttonList = ["#showHide01", "#showHide02a", "#showHide02b", "#showHide03a", "#showHide03b", "#showHide04"]; var tableList = ["#table01 tbody", "#table02a tbody", "#table02b tbody", "#table03a tbody", "#table03b tbody", "#table04 tbody"] $(function() { var i = 0, len = buttonList.length; for (i; i < len; i += 1) { $(buttonList[i]).on("click", (function(i) { /* IIFE closure */ /* e is the event */ return function(e) { /* i is now available at the value it was at point of execution in loop */ $(tableList[i]).toggle(); } })(i) /* immediately executed passing in loop 'i' */ ); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <button class="btn btn-info" id="showHide01">Show/hide table</button> <table id="table01"> <thead> <tr> <th>Id</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table> <button class="btn btn-info" id="showHide02a">Show/hide table</button> <table id="table02a"> <thead> <tr> <th>Id</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table> <button class="btn btn-info" id="showHide02b">Show/hide table</button> <table id="table02b"> <thead> <tr> <th>Id</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table> <button class="btn btn-info" id="showHide03a">Show/hide table</button> <table id="table03a"> <thead> <tr> <th>Id</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table> <button class="btn btn-info" id="showHide03b">Show/hide table</button> <table id="table03b"> <thead> <tr> <th>Id</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table> <button class="btn btn-info" id="showHide04">Show/hide table</button> <table id="table04"> <thead> <tr> <th>Id</th> <th>D2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>002</td> </tr> </tbody> </table>