使用jQuery选择

您可以使用相对选择器来避免所有这些ID废话。

showDetails(this) <---发送一个引用当前元素

 function showDetails(element) { $(element).next('div').show(). } 

您需要使用this将事件源传递给函数。

HTML

使用Javascript

 function showDetails(obj) { var id=$(obj).attr('data-id'); $("#details_"+id).show(); } 

如果使用jQuery绑定事件，则可以使用this内部处理程序

 $('[id^=topic_]').click(function(){ var id=$(this).attr('data-id'); $("#details_"+id).show(); }); 

$('div[id^=details_]')将获取id以字符串详细信息开头的所有div

首先，你要隐藏所有的div。 要么添加一个像“hidden”这样的css类，要么将显示设置为none，要么使用类似这样的jquery

 $('div[id^="details_"]').hide(); 

然后，showDetails函数需要知道需要显示哪个项目。 我建议你使用jquery，而不是每个项目都有onclick 。

（这不是必要的，但可以替代你所拥有的）

 $('div[id^="details_"]').click(function() { $("#details_"+ $(this).attr('data-id')).show(); // or as Diodeus suggested // $(this).next('div').show(). }); 

总而言之，您可以将所有这些放在文档就绪方法中

 $(document).ready(function() { $('div[id^="details_"]').hide(); $('div[id^="details_"]').click(function() { $("#details_"+ $(this).attr('data-id')).show(); }); }) 

听起来你想要做的就是手风琴。 每个Topic div都是手风琴标题，每个Details div都是手风琴的主体。 当您单击主题div时，将打开其对应的详细信息div。 您可以轻松找到可提供此类function的手风琴jQuery插件。

但如果你不想要一个插件，你可以这样做：

1）向主题div添加一个类，class =“topic”

2）在详细div中添加一个类，class =“details”

 $(document).ready(function() { var details = $('div.details'); var topics = $('div.topics'); details .hide(); //hide all the details divs topics .click(function() { details.hide(); //hide any open details $(this).next('div.details').show(); //or you could use slideDown()/fadeIn() }; }); 

此代码假定每个主题div都在其后面有一个详细信息div。 如果您不想在每次单击主题div时隐藏详细信息div，只需删除details.hide()行。

除了所有这些东西之外，你真的真的不需要在你的div中进行onclick。 请不要这样做。

请考虑这样的事情：

 $value) { ?> 
 ------------------------------ 
 
 ------------------------------ 
  

请注意，我摆脱了onclick …现在，在你的js中：

 // set up your doc-ready code... $(function(){ var showDetails = function(evt) { var id= $(this).data('id'); $("#details_"+id).show(); }; // now bind all divs that start with topic_ with a click event, with showDetails as the handler $('div[id^=topic_]').on('click',showDetails); }); 

现在，伟大，笨拙的海鲂，但我们不能比这更好吗？ 我想我们可以！ 如果您有权选择标记结构，请选择一个可以嵌套作为其逻辑语义标记的一部分，以便您的标记具有意义……

首先，让我们选择逻辑标记：

 
 $value) { ?> 
 ------------------------------ 
 
 ------------------------------ 
   

CSS：

 .topiclist dd { display:none; margin:0 0 1em; padding:0; } .topiclist dd.show { display:block; } 

JS！

 // set up your doc-ready code... $(function(){ var showDetails = function() { // find the next sibling dd to this object and show it! $(this).next('dd').show(); }; // now bind all divs that start with topic_ with a click event, with showDetails as the handler $('dl dt').on('click',showDetails); }); 

制作一个也可以切换显示/隐藏的function并不是太多的步骤！

 // set up your doc-ready code... $(function(){ var toggleDetails = function(){ var mySib = $(this).next('dd'); ($(mySib).hasClass('show')) ? $(mySib).removeClass('show') : $(mySib).addClass('show'); }; $('.topiclist dt').on('click',toggleDetails); }); 

考虑到这一点，实际上，你甚至根本不需要在你的标记中使用data-id …只要你总是安排你的列表以便dt是第一个并且直接后跟一个dd，这应该工作。

http://jsfiddle.net/mori57/nqyRX/