Javascript 单击链接时触发jQuery函数

我有一个大约有20个项目的对照表。我想当一个链接被点击时，它会显示该项目的更多信息。我可以使用以下功能来完成此操作：

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

然而，正如我所提到的，有20个项目，重复上面的代码可能会很麻烦

如何创建一个函数，在单击的链接下方显示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>

p> 信息在此

p> 信息在此

我假设这可以使用

this

属性来实现，但我不知道如何实现

this

，因为我对JS不够熟悉

总结：如何在这个表中创建一个链接，单击该链接，然后显示相应的div，而不必为每个项目创建一个重复代码

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

使用该方法，我们可以向上遍历dom一个级别，然后使用获得下一个立即div，它似乎按照您的标记的顺序运行。

试试看

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

编辑：根据问题中的要求添加隐藏功能

---

解释 在上面的代码中，

此

引用触发单击事件处理程序的元素（单击的锚元素）

然后，

这个

被包装在一个jQuery对象中，我们使用该方法遍历DOM树到一个公共祖先，从那里我们找到要显示的隐藏元素

---

第一行中的

$（'.hide'）.hide（）

是不言自明的，它在设置要显示的元素的

fadeIn

动画之前，使用

hide

类隐藏所有元素。

使用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');
    }
 });
});​

编辑：工作代码

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

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

---

编辑以包含隐藏功能。

元素不能重复使用该id，您使用什么id以便我可以给您正确的答案？

如果（$（this）.not（'.show'））

wut？您意识到，

。不

总是返回一个计算结果为true的jQuery对象，对吗？改为使用。@Fabricio Matté-哈，是的，这里的工作日结束后，应该停止尝试回答问题。还有一个问题-当单击不可见的div时，是否可以使可见的div淡出？