2010-03-23 135 views
1

我有一个链接列表。这些链接是指向同一页上的表的链接。我想要做的是我在列表中点击的任何链接都会显示相应的表格并隐藏所有其他链接。JQuery:哪个元素被点击?

无需添加不同的ID /类列表及其对应表中的每个环节,有没有办法找出点击了哪个元素和show()其表?

从我理解的JQuery返回一个数组对象的选择器。我怎样才能找出数组被点击的元素?

我试着使用event.which但我有点失落。

非常感谢帮助!

+0

你可以发布样本标记吗?列表中的链接是否与其他元素中的表格具有相同的顺序?需要某种方式来联系他们,即使只是通过索引。 – 2010-03-23 23:13:31

回答

2

CSS:

<style type="text/css"> 
    table {display:none;} 
</style> 

脚本:

$(document).ready(function() { 

     $.each($('a'), function(i) { 

      var link = $(this); 

      link.click(function() { 

       $('table').hide().eq(i).fadeIn(); 
      }); 

     }); 
    }); 

HTML:

<ul> 
    <li><a href="#">first</a></li> 
    <li><a href="#">second</a></li> 
    <li><a href="#">third</a></li> 
</ul> 

<table> 
    <tr> 
     <td>first</td> 
    </tr> 
</table> 
<table> 
    <tr> 
     <td>second</td> 
    </tr> 
</table> 
<table> 
    <tr> 
     <td>third</td> 
    </tr> 
</table> 
+0

海报特意问:“无添加不同的ID /类列表中的每个环节和其对应的表” – 2010-03-23 23:21:07

+0

我更新后不使用任何类名 – XGreen 2010-03-23 23:25:26

+0

这个完美的作品。但在我实现这个之前,我想了解jQuery如何做一些事情。为什么你必须使用$ .each($('a'),function(i){..}); ?而不仅仅是$('a')。click(function(){}); 。 当你传递一个参数(在这种情况下变量“我”)你怎么知道它是什么?香港专业教育学院传递一个参数去那种功能时所看到的仅仅是“事件” .. 最后,$(“表”)隐藏()等式(1).fadeIn()。 为什么我们应该再次调用hide(),如果它已经通过CSS隐藏了?为什么不$('table')。eq(i).fadeIn()工作? 对于新手问题抱歉,在jquery中花了很长时间。 – cp3 2010-03-24 19:50:43

1

$( 'A')点击附加一个单一事件的元素但每种(等同。在C#中的foreach)遍历选择器的所有匹配元素

每个函数都有一个内置的功能,将“i”变量作为索引添加到这些元素中。

,你可以使用很容易重新创建(i = 0;我< bla.length;我++)......但每个人都有这一切里面。

最后,我已经设置所有表隐藏在CSS中,并在链的起始处使用隐藏功能,如果我不作为点击的结果,因为点击成为显示:块,然后如果我点击第二个链接,则第二个表格变得可见,第一个表格也不会被隐藏。

所以躲确保每个表是隐藏的,唯一的,我后来变成显示的指标相匹配的。

+0

感谢您花时间向我解释! :) – cp3 2010-03-24 21:57:44