Question

在我的代码中，我有2个div，一个div包含3个表，其中包含id table1，table2，table3。其他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 . - 类选择器。将类属性添加为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

Answer 2

您已关闭，但您不想要HTML的{{1}}，您想要li（我建议您在下面更改）。

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>

直播示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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（）;不需要Classes或Ids ..只需点击1st li show 1st table ..如果点击2nd li显示第二张表...等等...

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

在li上单击切换特定表

6 个答案: