[英]Jquery: How to recursively assign buttons on document ready?
I have multiple buttons and tables, I want to recursively assign each button id to respective table id. 我有多个按钮和表格,我想将每个按钮ID递归地分配给各自的表格ID。
For each button, the function should help me toggle their respective tables. 对于每个按钮,该功能应有助于我切换各自的表格。 Clicking button 1 ("#showHide01") will toggle table 1 ("#table01").
单击按钮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>
How can I fix this? 我怎样才能解决这个问题? Thanks!
谢谢!
What you can do is assign a single class to all your <buttons>
and use a data
attribute to separate which button toggles which table. 您可以做的是为所有
<buttons>
分配一个类,并使用data
属性来分隔哪个按钮切换哪个表。 That way you can create a single bind to all your buttons and get the id of the table you want to toggle systematically . 这样,您可以为所有按钮创建一个单一绑定,并获取要系统切换的表的ID。
Basically the html it will go: 基本上它会去的html :
<button class="btn btn-info js_toggle-table" data-table-id="table01">Show/hide table</button>
<table id="table01">
And the javascript/jquery will be: 而javascript / jquery将是:
$(".js_toggle-table").on("click", function(el) {
var tableIdSelector = "#" + $(el.target).data('table-id');
$(tableIdSelector).toggle();
});
Check the updated snippet: 检查更新的代码段:
$(".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>
Cheers! 干杯!
EDIT: I changed the names of the buttons and table to make it clear which one was disappearing when the button was clicked. 编辑:我更改了按钮和表的名称,以使单击按钮时清楚消失的是哪一个。
Add a class to each button (like "toggle-button"): 向每个按钮添加一个类(例如“切换按钮”):
<button class="btn btn-info toggle-button" id="showHide04">Show/hide table</button>
Then you can take this script: 然后,您可以使用以下脚本:
$(".toggle-button").click(function() {
$(this).next().find("tbody").toggle();
});
To make the code work you have to keep a copy of i at its current value with a closure. 为了使代码正常工作,您必须使用闭包将i的副本保持为当前值。 This page gives a bit of a walkthrough of the issue you came across.
该页面对您遇到的问题进行了一些演练。 http://www.mennovanslooten.nl/blog/post/62
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.