Question

我有一个div包含3个表，其中包含id table1，table2和table3，最初的表是hide。还有另一个div包含3个li元素，其id与table相同。在第一个li点击我想要切换第一个表和table2，表3将被隐藏。与table2和table3相同。 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查询代码来获取结果，但我没有得到正确的结果。我不想使用class或id for li。我想在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。

Answer 2

您可以这样使用：

<div class="container" >
     <table id="table1_1">
      <tr>A</tr>
     </table>
     <table id="table2_1>
      <tr>B</tr>
     </table>
     <table id="table3_1>
      <tr>C</tr>
     </table>
     </div>

并像这样使用

$(document).ready(function(){

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

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

Answer 3

重复的id建议很棒，但实际上并没有造成任何问题，也无法解决任何问题。

问题是打破html标记。您只需td

中的tr即可

<table id="table1_1">
  <tr><td>A</td></tr>
</table>

Answer 4

我不想为li使用class或id。我想在上面执行此操作价值基数，因为li和table具有相同的值。

尝试使用:contains()

$("table").hide(0);

$(".container2 li").on("click", function(e) {
  $("table td:contains("+ $(this).text() +")")
  .parents("table").toggle().siblings().hide(0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="container">
  <table id="table1">
    <tbody>
      <tr>
        <td>A</td>
      </tr>
    </tbody>
  </table>
  <table id="table2">
    <tbody>
      <tr>
        <td>B</td>
      </tr>
    </tbody>
  </table>
  <table id="table3">
    <tbody>
      <tr>
        <td>C</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="container2">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</div>

Answer 5

[基于@Stephen Bugs Kamenar回答的评论..]

鉴于每个id与您要显示/隐藏的表的$(".container2 li").click(function () { var tarTable = $("#" + $(this).html()); });具有相同的text / html，您可以在click事件中访问它，并将其用作选择器对于相应的表元素，如：

.not()

通过向每个表元素添加一个额外的类（或者如果没有其他任何需要担心的话，只使用'table'），您可以确保通过使用{只显示与单击的li对应的表是可见的{1}}选择器：

$(document).ready(function() {
  $(".container2 li").click(function() {
    // get the target table:
    var tarTable = $("#" + $(this).html());

    // toggle:
    tarTable.toggle();

    // get all the tables with the 'table' class, except for our tarTable
    // hide them
    $('.table').not(tarTable).hide();
  });
});

#table1,
#table2,
#table3 {
  display: none;
}
td {
  border: solid 2px pink;
  padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container2">
  <ul>
    <li>table1</li>
    <li>table2</li>
    <li>table3</li>
  </ul>
</div>
<div class="container">
  <table id="table1" class="table">
    <!-- ADDED CLASS -->
    <tr>
      <td>A</td>
    </tr>
  </table>
  <table id="table2" class="table">
    <tr>
      <td>B</td>
    </tr>
  </table>
  <table id="table3" class="table">
    <tr>
      <td>C</td>
    </tr>
  </table>
</div>

[关于原帖的说明]

请务必为表格元素使用正确的html标记。所有<tr>（表格行）元素至少需要一个<td>元素（表格单元格/数据）。
元素id应该只出现每页 - 如果可能的话（例如，如果你创建自己的标记，则永远不需要这样做）
确保正确关闭引号 - 这也可能导致问题

用于测试javascript / jquery和html的非常好的资源是jsfiddle。它具有“整理”和“jshint”功能，可以快速使代码更易读，并检查语法错误。

点击后打开一个特定的表

5 个答案: