Question

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

我已经提出了下面的工作方式，但我绝对不是最干净的方法。

我已经考虑了一些其他方法，例如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 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();
});

＆＃13;

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

＆＃13;

.table {
  display: none
}

＆＃13;

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

＆＃13;

多个表显示/隐藏重构

1 个答案: