Question

我有9张图片和9张桌子。每个图像都充当一个“按钮”，使其所属的表格切换。这些表最初是使用display：none隐藏的，因此单击图像1会显示表1，但单击图像1也会确保表2-9也被隐藏，因为它们都显示在同一位置。如果其他人没有被隐藏，那么我点击其中一个切换它的表将显示在已经显示的那个下面。

实现此目的的基本代码如下：

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

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

Answer 1

您可以为所有元素设置单个类并完全隐藏它们

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

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

晒。

Answer 2

尝试为所有图片添加课程，例如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();
});

希望这能引导你朝着正确的方向前进：）

Answer 3

我使用此代码工作。也许这将有助于其他人。

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

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

3 个答案: