0

我有一个包含大约 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>

我认为这可以使用该this属性来完成，但我不知道如何实现this，因为我对 JS 不够熟悉。

总结一下：我如何在此表中有一个链接，该链接将被单击，然后该链接显示适当的 div，而无需为每个项目创建重复代码？

4

4 回答 4

1

尝试

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

小提琴

编辑：添加了问题中要求的隐藏功能。

解释

在上面的代码中，this引用了触发点击事件处理程序的元素（被点击的锚元素）。

然后，this包裹在一个 jQuery 对象中，我们使用该.closest方法遍历 DOM 树直到一个共同的祖先，从那里我们找到要显示的隐藏元素。

第一$('.hide').hide()行中的 是不言自明的，它在为要显示的元素设置hide动画之前隐藏了类中的所有元素。fadeIn

于 2012-10-17T23:40:50.140 回答
0 
$(function(){
    $('.show').click(function() {
        $(this).parent().next('div').fadeIn('slow');
    });
});​

使用.parent()方法，我们可以向上遍历 dom 一层，然后使用.next()我们得到下一个直接 div，它似乎遵循您的标记的顺序。

于 2012-10-17T23:39:21.283 回答
0

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

编辑：工作代码。

于 2012-10-17T23:41:29.583 回答
0 
$(function(){
  $('.show').click(function() {
    $('.hide').hide();
    $(this).parent('div').next('div').fadeIn('slow');
 });
});

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

编辑以包括隐藏功能。

于 2012-10-17T23:42:33.977 回答