我将如何使用 jQuery 显示与唯一链接最接近的段落元素？

Question

标题有点生疏了，抱歉。

现在让我解释一下我想要做什么。

我有一些列出的项目，如下所示：

<li>
    <a id="toggle" class="0"><h4>ämne<small>2010-04-17 kl 12:54</small></h4></a>
    <p id="meddel" class="0">text</p>
</li>

<li class='odd'>
    <a id="toggle" class="1"><h4>test<small>2010-04-17 kl 15:01</small></h4></a>
    <p id="meddel" class="1">test meddelande :) [a]http://youtube.com[/a]</p>
</li>

我想要实现的功能是，当用户单击“切换”链接（h4 文本）时，我希望其下面的段落元素淡入。我想到了为切换链接和段落赋予相同的类，然后以某种方式使其获得与单击的切换链接具有相同类的段落并显示它的想法？但我也不完全确定如何做到这一点，而且说实话，这听起来不是最好的主意，但也许这是唯一的方法？我不知道...

是否有某种方法可以简单地获取ID为“meddel”的最近段落（链接下方）并将其淡入？这听起来容易一些……

我希望你至少能给我一些提示。 提前致谢， -耐克

Answer 1

您的 ID 需要是唯一的，我会给您的链接一个类，如下所示：

<li>
    <a class="toggle"><h4>ämne<small>2010-04-17 kl 12:54</small></h4></a>
    <p>text</p>
</li>

<li class='odd'>
    <a class="toggle"><h4>test<small>2010-04-17 kl 15:01</small></h4></a>
    <p>test meddelande :) [a]http://youtube.com[/a]</p>
</li>

然后您可以执行以下操作：

$(function() {
  $("a.toggle").click(function() {
    $(this).next("p").animate({ opacity: 'toggle'});
  });
});

在 的任何单击上都会找到下一个

并淡入淡出切换它。另外，课程不能以数字开头，请确保不要这样做以获得可预测的结果。

Answer 2

$("h4").click(function() {
  var p = $(this).siblings("p");
  if (p.is(":hidden")) {
    p.fadeIn();
  } else {
    p.fadeOut();
  }
});

问题之一：你们的锚点具有相同的 ID。他们不应该。 ID 应该是唯一的。

Answer 3

试试这个：

$(function(){
    $('a.toggle, a.toggle h4').toggle(function(){
      $(this).next().fadeOut('slow');
    }, function(){
      $(this).next().fadeIn('slow');
    });
});

给你的链接一个class而不是id。