通过点击jQuery中的一个函数点击不同的对象来切换多个元素

我有9个图像和9个表格。每个图像都起着一个“按钮”的作用，它会导致它所属的表切换。这些表格最初隐藏着display：none，因此点击图片1显示了表格1，但点击图片1也可以确保表格2-9也被隐藏，因为它们都显示在相同的位置。如果其他人没有隐藏，那么我点击切换其表格就会出现在已经显示的表格下方。通过点击jQuery中的一个函数点击不同的对象来切换多个元素

的基本代码来实现，这看起来像这样：

$('#img1').click(function(){ 
    $('#tbl2, #tbl3, #tbl4, #tbl5, #tbl6, #tbl7, #tbl8, #tbl9').hide(); 
    $('#tbl1').toggle('fast'); 
});

除了我重复此为每个图像点击功能。我想要做的是设置一个函数或其他东西，这将使我能够大大简化这些代码，因为它非常冗余。有什么建议么？

来源

2011-12-07 AverageJoe

-1

我这使用此代码工作。也许它将在未来帮助别人。

$("#contianer img").click(function() { 
    $('#tbl1_img, #tbl2_img, #tbl3_img, #tbl4_img, #tbl5_img, #tbl6_img, #tbl7_img, #tbl8_img, #tbl9_img').removeClass('selected'); 
    $(this).addClass('selected'); 
    var tblToShow = $(this).attr('id').replace('_img', ''); 
    $('#tbl1, #tbl2, #tbl3, #tbl4, #tbl5, #tbl6, #tbl7, #tbl8, #tbl9').addClass('hidden').removeClass('fadeIn'); 
    $('#'+tblToShow).toggleClass('hidden'); 
    $('#'+tblToShow).addClass('fadeIn'); 
});

来源

2012-02-17 17:26:41 AverageJoe

你可以设置一个单一类的所有元素，并完全隐藏他们

<div id="tbl2" class="table"></div> 
<div id="tbl3" class="table"></div> 
<div id="tbl4" class="table"></div>

$(".table").hide();

晒。

来源

2011-12-07 16:04:07

尝试向所有图片添加一个类，例如btn和title="1"等标签。将所有表格放在一个ID为info的div中。

可能是这样的：

<img src="..." class="btn" title="1" /> 
<img src="..." class="btn" title="2" /> 
//... 
<div id="info"> 
    <table id="table1"></table> 
    <table id="table2"></table> 
</div>

如下内容我会写的函数：

$('.btn').click(function(){ 
    //hide all the tables 
    $('#info table').hide(); 
    //get the title 
    var t = $(this).attr('title'); 
    //assuming a table is called "table1" 
    $('#table'+t).fadeIn(); 
});

希望这会导致你在正确的方向:)

来源

2011-12-07 16:07:55 sirmdawg

通过点击jQuery中的一个函数点击不同的对象来切换多个元素

回答

相关问题