当单击标题时，是否使信息显示在另一个div上以获取信息？

Question

我正在为此寻找一个jQuery解决方案。 当我单击时，让我们说一个艺术家的名字。 他们旁边的另一个div显示了信息。 （可能以动画/淡入淡出的方式）

有人可以帮忙吗？

Answer 1

物理邻近中的链接和信息

如果您的演出者链接和演出者信息在物理距离之内（例如，DOM中的同级兄弟），请使用此方法。 假设您有：

<a ... class="artistInfo">Artist name</a>
<div class="artistInfo"> .... shown on link click </div>

... repeat

然后使用：

$('div.artistInfo').hide(); // Initially hide info
$('a.artistLink').click(function() { // Show on click
    $(this).next('div.artistInfo').fadeIn();
});

next()用于避免将每个链接信息集包装在“每个艺术家”容器中。 因此，您应该能够在同一页面中具有link-plus-info的多个“集合”。

链接和信息在不同的地方

当有链接和Tha信息之间没有物理上接近，你会需要某种标识符从链接信息*。 例如，

<a ... class="artistLink" id="artistLink-1">Artist name</a>

... 

<div class="artistInfo" id="artistInfo-1"> .... shown on link click </div>

您现在可以：

$('div.artistInfo').hide(); // Initially hide all infos
$('a.artistLink').click(function() { // Show on click (by reference)
    var n = $(this).attr('id').substring(11); // Remove "artistLink-"
    $('#artistInfo' + n).fadeIn();
});

---

*） 注意 ：如果链接和信息的订购顺序相似，则可以使用DOM索引。 th <a> element corresponds to the info element. 即，第个<a>元素对应于第 info元素。

Answer 2

使用jquery的.html方法

Answer 3

如果“旁”是下一个兄弟姐妹，则可以使用next ：

$(".artist").click(function() {
    $(this).next("div").slideToggle("slow");
});

<span class="artist">Foo and the Jackals</span>
<div>some content</div>

<span class="artist">Jeff and the misshapen lunatics</span>
<div>some content</div>

...

slideToggle将“以滑动方式显示或隐藏匹配的元素”。

Answer 4

有很多方法可以做到这一点。 但这实际上取决于您想要的程度。 一种可能的方法是在隐藏的DIV上使用fadeIn方法。

<div class='box' style="display:none;"> <p> Artist Description </p> </div>

<p id='abcd'>Artist Name</p>

例如在此代码上使用此jQuery

jQuery('#abcd').click(function(){ jQuery('.box').fadeIn(); });