在 li 单击切换特定表答案

【问题标题】：On li click toggle a specific table在 li 单击切换特定表
【发布时间】：2015-07-18 22:20:12
【问题描述】：

在我的代码中，我有 2 个 div，一个 div 包含 3 个表，id 为 table1、table2、table3。其他 div 有 3 个 li 元素，其类与表 id 相同。第一个 li 类是 table1，第二个 li 类是 table2 ......等等。最初所有的表都是隐藏的。在第一次点击我想切换第一个表，在第二个切换到第二个表......等等。 HTML 代码是

    <div class="allTemplateName">
        <li class="table1">A</li>
        <li class="table2">B</li>
        <li class="tbale3">C</li>
    </div>

 <div class="container">
   <table id="table1">
   <tr>
     <td> Hello</td>
   </tr>
  </table>
<table id="table2">
   <tr>
   <td> Hello</td>
    </tr>
   </table>
   <table id="table3">
    <tr>
     <td> Hello</td>
   </tr>
   </table>
 </div>

我正在使用这个 j 查询代码来获取结果，但它不起作用。

    $(document).ready(function() {
      $(".allTemplateName li").click(function() {
       // get the target table:
       var tarTable = $("#" + $(this).html());

            // toggle:
         tarTable.toggle();

           $('.table').not(tarTable).hide();
        });
    });

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

变化不大：

.html() 获取元素的内部 html，使用 .attr('class') 或 prop('class') 获取类名称。
$('.table') 将找到类为 tablr. 的元素 - 类选择器。添加类属性为table 或使用$('table') 元素选择器。
类属性<li class="tbale3">C</li> - class="table3" 中的错字

$(document).ready(function () {
    $(".allTemplateName li").click(function () {
        // get the target table:
        var tarTable = $("#" + $(this).attr('class'));

        // toggle:
        tarTable.toggle();    
        //if you need to keep the element visible use tarTable.show()

        $('.container table:visible').not(tarTable).hide();
    });
});

Fiddle

【讨论】：

【解决方案2】：

你可以使用 .index();无需 Classes 或 Ids .. 只需单击 1st li 显示 1st table .. 如果单击 2nd li 显示 2nd table .. 以此类推...

 $(document).ready(function() {
      $(".allTemplateName li").on('click',function() {
       // get the target table:
       $('.container table').hide();
       $('.container table').eq($(this).index()).slideDown();
    });
});

JSFIDDLE

【讨论】：

【解决方案3】：

你已经接近了，但你不想要li 的HTML，你想要它的class（我建议在下面更改它）。

$(function() {
    $(".allTemplateName li").click(function() {
        var tableSelect = "#" + $(this).attr("class");
        var tables = $(".container table");
        tables.filter(tableSelect).toggle();
        tables.not(tableSelect).hide();
    });
});

我不使用class 的原因是您可能希望将其他类添加到那些li 元素中，这会破坏它。相反，我会使用 data-* 属性：

<div class="allTemplateName">
    <li data-table="#table1">A</li>
    <li data-table="#table2">B</li>
    <li data-table="#table3">C</li>
</div>

然后：

$(function() {
    $(".allTemplateName li").click(function() {
        var tableSelect = $(this).attr("data-table");
        var tables = $(".container table");
        tables.filter(tableSelect).toggle();
        tables.not(tableSelect).hide();
    });
});

实例：

$(".container table").hide();
$(function() {
  $(".allTemplateName li").click(function() {
    var tableSelect = $(this).attr("data-table");
    var tables = $(".container table");
    tables.filter(tableSelect).toggle();
    tables.not(tableSelect).hide();
  });
});

<div class="allTemplateName">
  <li data-table="#table1">A</li>
  <li data-table="#table2">B</li>
  <li data-table="#table3">C</li>
</div>

<div class="container">
  <table id="table1">
    <tr>
      <td>Table 1</td>
    </tr>
  </table>
  <table id="table2">
    <tr>
      <td>Table 2</td>
    </tr>
  </table>
  <table id="table3">
    <tr>
      <td>Table 3</td>
    </tr>
  </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

【讨论】：

【解决方案4】：

试试这个：我还添加了一些 CSS。

这是工作小提琴：http://jsfiddle.net/dLz9cweh/

HTML：

<div class="allTemplateName">
    <li class="table1">A</li>
    <li class="table2">B</li>
    <li class="table3">C</li>
</div>
<div class="container">
    <table id="table1" class="hide">
        <tr>
            <td>Hello A</td>
        </tr>
    </table>
    <table id="table2" class="hide">
        <tr>
            <td>Hello B</td>
        </tr>
    </table>
    <table id="table3" class="hide">
        <tr>
            <td>Hello C</td>
        </tr>
    </table>
</div>

CSS：

table {
    border:1px solid black;
    margin:10px;
}
li {
    cursor:pointer;
}
.hide {
    display : none;
}
.active {
    display:block
}

JS

$(document).ready(function () {
     $(".allTemplateName li").click(function () {
         var id = $(this).attr('class');
         $("#" + id).addClass('active').siblings().removeClass('active');

     });
 });

【讨论】：

【解决方案5】：

html:

<div class="allTemplateName">
<li class="table1">A</li>
<li class="table2">B</li>
<li class="table3">C</li>
</div>
<div class="container">
<table id="table1">
    <tr>
        <td> Hello 1</td>
    </tr>
</table>
<table id="table2">
    <tr>
        <td> Hello 2</td>
    </tr>
</table>
<table id="table3">
    <tr>
        <td> Hello 3</td>
    </tr>
</table>

js:

$(document).ready(function () {
    $(".allTemplateName li").click(function () {
        // get the target table:
        var tarTable = $("#" + $(this).attr('class'));
        // toggle:
        tarTable.toggle();

        $('.table').not(tarTable).hide();
    });
});

【讨论】：

【解决方案6】：

请按照以下代码制作结构...

<div class="allTemplateName">
   <li data-id="table1" class="template-name">A</li>
   <li data-id="table2" class="template-name">B</li>
   <li data-id="table3" class="template-name">C</li>
</div>

<div class="container">
  <table id="table1" class="table-select">
   <tr>
    <td> Hello</td>
   </tr>
  </table>
  <table id="table2" class="table-select">
   <tr>
    <td> Hello</td>
   </tr>
  </table>
  <table id="table3" class="table-select">
   <tr>
    <td> Hello</td>
   </tr>
  </table>
</div>

然后像这样使用jquery：

$("body").on("click", ".template-name", function (e) {
   var tableId = $(this).attr("data-id");
$(".table-select").hide(); // this would be hide all table initially 
$("#"+tableId).show();// this will be show selected table contains unique id 
 });

【讨论】：