Question

我有一个大约有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，而不必为每个项目创建重复代码？

Answer 1

尝试

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

Fiddle

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

说明

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

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

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

Answer 2

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

利用.parent()方法，我们可以遍历dom一级，然后使用.next()我们得到 next 立即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。

编辑包含隐藏功能。

单击链接时触发jQuery函数

4 个答案:

说明