2010-03-23 2 views
1

У меня есть список со ссылками. Эти ссылки являются ссылками на таблицы на одной странице. То, что я хочу сделать, - это любая ссылка, которую я нажимаю в списке, она отобразит соответствующую таблицу и скроет все остальные.JQuery: какой элемент был нажат?

Не добавляя другой идентификатор/класс в каждую ссылку в списке и соответствующую таблицу, есть ли способ узнать, какой элемент был нажат и показать() его таблицу?

Из того, что я понимаю, JQuery возвращает объект массива на своем селекторе. Как узнать, какой элемент массива был нажат?

Я пытался использовать event.which, но я немного потерялся.

Помощь очень ценится!

+0

Можете ли вы опубликовать образец разметки? Являются ли ссылки в списке в том же порядке, что и таблицы в других элементах и ​​т. Д.? Нужно каким-то образом связать их, даже если по индексу. –

ответ

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

Плакат специально спросил: «Без добавления другого идентификатора/класса к каждой ссылке в списке и соответствующей таблице» –

+0

я обновил сообщение, чтобы не использовать имя какого-либо класса – XGreen

+0

, это отлично работает. но прежде, чем я даже реализую это, я хотел бы понять, как jquery делает несколько вещей. Почему вы должны использовать $ .each ($ ('a'), function (i) {..}); ? а не просто $ ('a'). click (function() {}); , , когда вы передаете параметр (в данном случае переменную «i»), откуда вы знаете, что он делает? единственная вещь, которую я видел при передаче параметра этой функции, - «событие». Наконец, $ ('table'). hide(). eq (i) .fadeIn(); Почему мы должны называть hide() еще раз, если он уже скрыт через CSS? почему не $ ('table'). eq (i) .fadeIn() работает? Извините за вопросы новичка, взял длинный перерыв в jquery. – cp3

1

$ ('а') нажмите присоединяет одно событие к элементу, однако каждая (эквивалент. foreach в C#) итерации через все соответствующие элементы селектора

Каждая функция имеет встроенную функцию, которая добавляет переменную «i» в качестве индекса для этих элементов.

вы можете легко воссоздать его, используя для (i = 0; i < bla.length; i ++) ... но у каждого есть все это внутри него.

и, наконец, я установил все таблицы, которые будут скрыты в css, и использовал функцию hide в начале цепочки, если я не приведу, например, таблицу 1, в результате щелчка становится отображением: block и затем если я нажму вторую ссылку, то вторая таблица станет видимой, а также первая, которая не будет скрыта.

так что скрыть гарантирует, что каждая таблица скрыта, и только тот, который соответствует индексу i, будет показан позже.

+0

Спасибо, что нашли время, чтобы объяснить это мне! :) – cp3

Смежные вопросы