單擊鏈接時觸發jQuery函數

Question

我有一個約有20個項目的比較表。 我希望在單擊鏈接時將顯示有關該項目的更多信息。 我可以使用以下功能來做到這一點：

$(function(){
  $('.show').click(function() {
    $('#keywords').fadeIn('slow');
 });
});

但是，正如我提到的，有二十項，重復上面的代碼可能很麻煩。

如何創建一個函數，該函數將在單擊的鏈接下方顯示div？ 最重要的是，如果div打開或可見，並且單擊了另一個項目，我希望另一個項目關閉或淡出，然后另一個顯示。

這是我的部分HTML代碼：

<tr class="second">
  <td class="cat" style="width: 33%;">
    <div>
      <a class="show" href="#"> Mobile Keywords</a>
    </div>
      <div id="keywords" class="hide">
         p>Info Here</p>
    </div>
 </td>

 <td style="width: 33%;">
    <i class="icon-ok"></i>
 </td>

 <td class="" style="width: 33%;">
     <i class="icon-ok"></i>
  </td>
</tr>

<tr class="second">
  <td class="cat" style="width: 33%;">
    <div>
      <a class="show" href="#">Another Category</a>
    </div>
      <div id="category-2" class="hide">
         p>Info Here</p>
    </div>
 </td>

 <td style="width: 33%;">
    <i class="icon-ok"></i>
 </td>

 <td class="" style="width: 33%;">
     <i class="icon-ok"></i>
  </td>
</tr>

我認為可以使用this屬性完成this但是由於我對JS不夠熟悉，因此我不知道如何實現this 。

總結：如何在此表中單擊鏈接，然后該鏈接顯示相應的div，而不必為每個項目創建重復的代碼？

Answer 1

嘗試

$('.show').click(function() {
    $('.hide').hide();
    $(this).closest('td.cat').find('.hide').fadeIn();
});

小提琴

編輯：根據問題的要求添加了隱藏功能。

---

說明

在上面的代碼中， this引用了觸發click事件處理程序的元素（clicked錨元素）。

然后， this其包裝在jQuery對象中，然后使用.closest方法遍歷DOM樹直到一個共同的祖先，從那里找到要顯示的隱藏元素。

第一行中的$('.hide').hide()是不言自明的，它在對要顯示的對象的fadeIn進行動畫處理之前，用hide類隱藏了所有元素。

Answer 2

$(function(){
    $('.show').click(function() {
        $(this).parent().next('div').fadeIn('slow');
    });
});​

利用.parent（）方法，我們可以將dom向上移動一個級別，然后使用.next（）獲得下一個立即div，該div似乎遵循您的標記順序。

Answer 3

使用您的HTML標記，這可能會起作用。 僅當當前顯示的div不相同時才隱藏它並顯示所需的元素。

$(function(){
  $('.show').click(function() {
    if ( !$(this).hasClass('shown') )
    {
        $('.shown').removeClass('shown').parent().siblings('div').hide();
        $(this).addClass('shown').parent().siblings('div').fadeIn('slow');
    }
 });
});​

編輯 ：工作代碼。

Answer 4

$(function(){
  $('.show').click(function() {
    $('.hide').hide();
    $(this).parent('div').next('div').fadeIn('slow');
 });
});

使用它（如您所料），查找其父div，然后查找其第一個同級div。

編輯以包括隱藏功能。