javascript - 单击打开特定表

Question

我有一个包含 3 个表的 div，表的 ID 为表 1、表 2 和表 3，最初表是隐藏的。还有另一个 div，其中包含 3 个 li 元素，其 id 与表相同。在第一次点击我想切换第一个表和表 2 和表 3 将被隐藏。与表 2 和表 3 相同。 html代码就像

    <div class="container" >
     <table id="table1">
      <tr>A</tr>
     </table>
     <table id="table2">
      <tr>B</tr>
     </table>
     <table id="table3">
      <tr>C</tr>
     </table>
     </div>

另一个div的html代码是

    <div class="container2">
     <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
     </ul>
    </div>

第一个 li 的值与 table1 中的值相同。 table2 和 table3 相同。我正在使用这个 j 查询代码来获取结果，但我没有得到正确的结果。我不想为 li 使用 class 或 id。我想根据 value 执行此操作，因为 li 和 table 具有相同的值。

    $(document).ready(function(){

    $(".container2 li").click(function() {

     $(".container").find("#" + this.id).toggle(); 
      });
     }); 

Answer 1

尝试这种方式，因为 id 应该是唯一的。

<div class="container2>
 <ul>
  <li openid="table1">A</li>
  <li openid="table2">B</li>
  <li openid="table3">C</li>
 </ul>
</div>

在 JS 中:

$(document).ready(function(){
   $(".container2 li").click(function() {
      var ids = $(this).attr('openid');
      $("#"+ids).toggle(); 
   });
}); 

记住 id 应该是唯一的。

在您的代码中，两个元素的 ID 相同，这是无效的。您需要在代码中定义任何额外的属性，如 openid 或任何其他内容。然后您可以获得要打开的那个表的 ID。