javascript - 使用 jQuery 显示/隐藏循环中生成的具有特定类和 id 的表行

Question

我尝试通过为我的 WordPress 网站制作自定义页面来学习 php 和 js 的基础知识。我有从数据库循环生成的数据列表，格式为表。我想在单击特定行后查看“更多详细信息”。我能够使其与我找到的 jQuery .toggle 脚本一起使用，但目前它仅适用于用户指定的行 id。

我必须将行的类和 id 传递给 jQuery 脚本。我已经找到了如何传递 id 或 class，但我无法同时传递两者。我确信这确实是一件微不足道的事情，但我的尝试没有成功。

我附加了一些简化的代码:

jQuery(function($) { 
    $('#1.row').click(function(){
        $('#1.row_extend').toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
	<tr id="1" class="row"><td>Content</td></tr>
	<tr id="1" class="row_extend"><td>Details</td></tr>
	<tr id="2" class="row"><td>Content</td></tr>
	<tr id="2" class="row_extend"><td>Details</td></tr>
</table>

正如所写，它显然只适用于 id=1 的行。我想让它适用于所有行。使用它的人会在几分之一秒内解决这个问题，但我在谷歌上搜索了半天:)谢谢。

Answer 1

不要为id添加数字，这里不需要添加id，我们可以使用class

$(function(){
	$('.row').click(function(){
		$(this).next('.row_extend').toggle();
	});	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
	<tr class="row"><td>Content</td></tr>
	<tr class="row_extend"><td>Details</td></tr>
	<tr class="row"><td>Content</td></tr>
	<tr class="row_extend"><td>Details</td></tr>
</table>