多个表 show/hide 重构

Question

假设我有多个 table 显示特定信息，我将如何以最干净的方式显示所选 table 但隐藏其他信息。

我想出了下面的方法，它按预期工作，但我敢肯定这绝对不是最干净的方法。

我考虑了一些其他方法，例如 jQuery 追加和切换，但未能提出可行的解决方案。

 <table id="table-1">
        <th>Table Heading</th>
        <tr>
            <td>Sample Text</td>
        </tr>

    </table>

    <table id="table-2">
        <th>Table Heading</th>
        <tr>
            <td>Sample Text</td>
        </tr>
    </table>

    <table id="table3">
        <tr>
            <th>Table Heading</td>
        </tr>
        <tr>
            <td>Sample Text</td>
        </tr> 
    </table>

jQuery

    $("#text-one").click(function () {
        $("#table-1").show();
        $("#table-2").hide();
        $("#table-3").hide();
    });

    $("#text-two").click(function () {
        $("#table-2").show();
        $("#table-1").hide();
        $("#table-3").hide();
    });

    $("#text-three").click(function () {
        $("#table-3").show();
        $("#table-1").hide();
        $("#table-2").hide();
    });

Answer 1

您可以将目标保存在自定义 data-* 前缀属性中，可以使用 .data().

进行访问

给BUTTON和TABLE元素添加一个公共的class，然后Class Selector (".class")就可以用来绑定事件处理器了。

HTML

<button type="button" class="btn" data-target="#table-1">Button 1</button>
<button type="button" class="btn" data-target="#table-2">Button 2</button>
<button type="button" class="btn" data-target="#table-3">Button 3</button>

<table class="table" id="table-1"></table>
<table class="table" id="table-2"></table>
<table class="table" id="table-3"></table>

脚本

$(".btn").click(function () {
    var targetSelector =$(this).data('target');
    var target = $(targetSelector);
    target.show();
    $(".table").not(target).hide();
});

$(".btn").click(function() {
  var targetSelector = $(this).data('target');
  var target = $(targetSelector);
  target.show();
  $(".table").not(target).hide();
});

.table {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn" data-target="#table-1">Button 1</button>
<button type="button" class="btn" data-target="#table-2">Button 2</button>
<button type="button" class="btn" data-target="#table-3">Button 3</button>

<table class="table" id="table-1">
  <tr>
    <th>Table Heading 1</th>
  </tr>
  <tr>
    <td>Sample Text</td>
  </tr>
</table>

<table class="table" id="table-2">
  <tr>
    <th>Table Heading 2</th>
  </tr>
  <tr>
    <td>Sample Text</td>
  </tr>
</table>
<table class="table" id="table-3">
  <tr>
    <th>Table Heading 3</th>
  </tr>
  <tr>
    <td>Sample Text</td>
  </tr>
</table>

多个表 show/hide 重构

Multiple tables show/hide refactor

html

jquery

html-table

show

hide