jquery - 使用 jQuery 选择

Question

1天前我在这里问了一个大问题，但没有得到足够好的答案，所以我把问题分成几个部分。这是一部分:

看一下这段代码:

<?php
    foreach($tickets as $key=>$value)
           {
?>
               <div id="topic_<?php echo $key;?>"  data-id="<?php echo $key;?>" onclick="showDetails()">
                   ------------------------------
               </div>
               <div id="details_<?php echo $key;?>"  data-id="<?php echo $key;?>">
                   ------------------------------
               </div>
<?php
           }
?>

在这里，我们有一些<div> s(“topic_...”和“details_...”)，每个都有唯一的 id( data-id )。我们不知道其中有多少<div> s 将会在那里，因为 foreach()环形。所有“详细信息”<div> s 将在第一次被隐藏。现在，当我点击“主题” <div> 时，我想要什么？ ，其对应的“详情”<div>将显示。我想我应该使用一个函数并在 onclick 中调用该函数事件，这就是我使用 onclick="showDetails()" 的原因在“主题”中<div> 。如果我错了或者你有更好的想法，请与我分享。这是 JavaScript 代码:

<script>
    $(document).ready(function(){
           $("#details_").hide();
    });
    function showDetails()
    {
        var id=$(this).attr('data-id');
        $("#details_"+id).show();
    }
</script>

我知道我无法检测到所有“细节_……”<div>在这里，可能也存在一些问题showDetails()功能。请帮助我。

谢谢大家。

Answer 1

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

showDetails(this) <--- 发送对当前元素的引用

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