点击标题时，信息会显示在另一个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()用于避免在“per-artist”容器中包装每个链接信息集。因此，您应该能够在同一页面中拥有多个link-plus-info“集合”。

不同位置的链接和信息

当链接和信息之间没有物理接近时，您需要从链接到信息*的一些种标识符。如，

<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索引。即， n <a>元素对应于 n 信息元素。

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(); });