在li上单击切换特定表

Question

在我的代码中，我有2个div，一个div包含ID为table1，table2，table3的3个表。 其他div有3个li元素，它们的类与表id相同。 第一个li类是table1，第二个li类是table2 ...依此类推。 最初，所有表都是隐藏的。 在第一个li上单击我要切换第一个表，在第二个上切换到第二个表...等等。 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();
        });
    });

Answer 1

几处变化：

• .html()获取元素的内部html，使用.attr('class')或prop('class')获得类名。
• $('.table')将查找类为tablr的元素. -类选择器。 可以将class属性添加为table也可以使用$('table')元素选择器。
• 类别属性<li class="tbale3">C</li>中的错字<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();
    });
});

小提琴

Answer 2

您已经接近了，但是您不想要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> 

Answer 3

请使结构类似于以下代码...

<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 
 });

Answer 4

您可以使用.index（）; 只需点击第一个li显示第一个表..如果单击第二个li显示第二个表..等等，就不需要类或ID。

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

的jsfiddle

Answer 5

试试这个：我还添加了一些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');

     });
 });

Answer 6

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();
    });
});