Question

我遇到的问题是，我需要复制许多重复项。我基本上试图显示单击底部的1/11表（list_row [1-11]），所以当我显示表2时，它必须隐藏所有其他表。

我相信这可以通过循环或其他东西缩短，因为如果我有100个表，那么我必须复制和粘贴，而不是智能。请记住，下面的代码只是显示表1到表3.如何防止这些重复？

// hide the tables by default when page loads
$('#table1').hide();
$('#table2').hide();
$('#table3').hide();
$('#table4').hide();
$('#table5').hide();
$('#table6').hide();
$('#table7').hide();
$('#table8').hide();
$('#table9').hide();
$('#table10').hide();
$('#table11').hide();                           

// Show Exhaust Temperature diagram 

        $('#list_row1').on('click',function(){ 
            $('#table1').show();
            $('#table2').hide();
            $('#table3').hide();
            $('#table4').hide();
            $('#table5').hide();
            $('#table6').hide();
            $('#table7').hide();
            $('#table8').hide();
            $('#table9').hide();
            $('#table10').hide();
            $('#table11').hide();  
        });

        // Show Cylinder Pressure diagram 
        $('#list_row2').on('click',function(){
            $('#table1').hide();
            $('#table2').show();
            $('#table3').hide();
            $('#table4').hide();
            $('#table5').hide();
            $('#table6').hide();
            $('#table7').hide();
            $('#table8').hide();
            $('#table9').hide();
            $('#table10').hide();
            $('#table11').hide();  

        });

        $('#list_row3').on('click',function(){ 
            $('#table1').hide();
            $('#table2').hide();
            $('#table3').show();
            $('#table4').hide();
            $('#table5').hide();
            $('#table6').hide();
            $('#table7').hide();
            $('#table8').hide();
            $('#table9').hide();
            $('#table10').hide();
            $('#table11').hide(); 
        });

// Code continues to table11.

Answer 1

将所有表格设置为display: none，然后将.active类设置为display: block（或display: table，在本例中）。然后只需打开和关闭班级：

.active {
    display: table;
}

$('#list_row1').on('click', function() {
    $('.active').removeClass('active');
    $('#table1').addClass('active');
});

为避免重复，您最好将此扩展为data-*元素添加#list_row/n/属性，并处理以下内容的点击事件：

<elem id="list_row1" data-row="1"></elem>

$('[data-row]').on('click', function() {
    var row = $(this).attr('data-row');

    $('.active').removeClass('active');
    $('#table' + row).addClass('active');
});

还要注意，您可以使用逗号链接选择器。您可以改为$(elem1).hide(); $(elem2).hide()而不是$(elem1, elem2).hide()。

Answer 2

尝试

$('[id^=list_row]').on('click',function(){ 
            $('table').hide();
            $('#table'+$(this).attr('id').slice(8)).show();     
});

Answer 3

您还可以使用starts-with jQuery选择器：

$('id^="table"').hide();

$('id^="list_row"').on('click',function(){
    var num = this.id.split('w')[1]; //alert(num)
    $('id^="table"').hide();
    $('#table'+num).show();
});

参考：

All jQuery Selectors

Answer 4

为所有表格和listrow元素添加一个类，并在这些元素上添加一个自定义属性以确定您点击的位置。

<table id="table2" class="tableClass">
<whatever id="list_row2" class="listRowClass" data-yourProjectname-numRow="2">

通过这种方式，您只需显示已被点击的表格并隐藏其余所有内容：

$(".listRowClass").on("click", function() {
    $(".tableClass").hide() // Hides all tables
    $("#table" + $(this).attr("data-yourProjectname-numRow")).show() //Shows clicked table
});

代码重复太多

4 个答案: