javascript - 如何将可单击行连接到从数据库检索的特定数据部分？

Question

标题可能有点误导，但很难用语言表达。

我一整天都在尝试，即使从 stackoverflow 尝试也失败了，所以我必须再次寻求帮助。

我正在从 MySQL 检索文章信息列表并将它们显示在表格中。显示后，可以使用 jQuery 单击这些表行 .click function ，当单击 ckeditor (带有 display:none; )时，将从 <section></section> 打开并隐藏整个表格。

我遇到的问题是，当我单击一行时，它应该显示 ckeditor 内那些特定文章的数据，但无论第一行数据总是显示，即使我单击不同的行，我可以指出，这是由于没有 id，因此 .click 函数无法区分它试图显示哪个部分，但我无法弄清楚如何将表与部分信息连接起来。

这就是我使用 foreach 检索数据并将其显示在表格中的方式。

<?php
$getInfo = $articleClass->get_all_article_info();

foreach($getInfo as $data)
{
    $article_title        = $data['article_title'];
    $article_content      = substr(htmlentities($data['article_content']),0,50).'...';
    $article_content_full = $data['article_content'];
    $article_uid          = $data['article_uid'];

    echo '
        <tr id="tr_id" class="'.$article_uid.'">
            <td class="marker">
                <i class="fa fa-align-left"></i>
            </td>

            <td class="title">
                '.$article_title.'
            </td>

            <td class="content">
                '.$article_content.'
                </td>
        </tr>

        <section id="post_info_id" style="display:none;">
            <textarea id="editor1">
                <div style="width:468px;">
                    '.$article_content_full.'
                </div>
            </textarea>
        </section>
    ';
}
?>

这就是点击功能； jQuery。

<script type="text/javascript">
$(document).on('click', '#tr_id', function ()
{
    $("#post_info_id").css("display", "block");
    $("#table_id").hide();
});

window.onload = function()
{
    CKEDITOR.replace( 'editor1' );
};
</script>

我知道问题是当我点击 tr 时，它无法区分 #post_info_id ，因为它只检索大约 20 行信息，但 $post_info_id没有与 #tr_id 匹配的特定 ID ，但我不知道如何才能做到这一点。我已经检索了article_uid，当文章插入数据库时​​，它是一个递增的数字，并且可以使用它来标记 #tr_id和#post_info_id但对于 jQuery，我不知道在我尝试过之后如何完成。

我不想让这个问题变得很长，考虑到我写的越多，得到答案的可能性就越小，但这是我尝试过的。

我尝试将article_uid设置为id，但我无法检索文章的id，因为它们是随机的，并且没有什么具体的说明我能够通过使用 .attr('id') 连接 post_info_id 和 tr_id .

Answer 1

这可以通过使用 Jquery next() 来实现功能。

您可以将 onclick 方法更改为:

$(document).on('click', '#tr_id', function ()
{
     $(this).next('section').css("display", "block");
     $("#table_id").hide();
});

所有元素都应该始终具有唯一的 ID，因此这里有一种实现此目的的方法:

'<section id="post_info_id"'.$counter.' style="display:none;">
     <textarea id="editor'.$counter.'">
         <div style="width:468px;">
             '.$article_content_full.'
         </div>
     </textarea>
 </section>'

然后声明一个变量以在循环外保持计数:

$counter = 0;

最后，在循环结束时增加计数器:

$counter++;