当点击标题时，将信息显示在另一个div上以获取信息？

Question

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

任何人都可以帮忙吗？

Answer 1

Link和的.html方法信息在物理上接近

使用，如果你的艺术家链接和艺术家的信息是物理距离内这种方法（即兄弟姐妹在DOM）。比方说，你有：

​​

然后使用：

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

next()是为了避免包装的各个环节，信息在“每个艺术家”容器设置。因此，您应该能够在同一页面中拥有多个“集合”链接加信息。

链接和信息异地

当有链接和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指数如果链接和相关信息也同样有序。即， n th <a>元素对应于 n info元素。

Answer 2

使用jQuery

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