Jquery：如何递归分配文档准备好的按钮？

时间：2016-09-14 20:09:15

标签： javascript jquery recursion

我有多个按钮和表，我想递归地将每个按钮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>

我该如何解决这个问题？谢谢！

3 个答案:

答案 0 :(得分：2)

您可以做的是为您的所有<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>

干杯！

编辑：我更改了按钮和表格的名称，以便在点击按钮时清楚显示哪一个正在消失。< / p>

答案 1 :(得分：1)

为每个按钮添加一个类（例如“toggle-button”）：

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

然后你可以使用这个脚本：

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

答案 2 :(得分：1)

要使代码正常工作，您必须使用闭包将 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>

相关问题
最新问题