使用article_id按钮打开对话框 - Open dialog box using article_id buttons

目前我正在设置一个管理面板，其中包含对我的文章的一些快速操作（在这种情况下，删除文章）。一旦我打到垃圾桶，应该会打开一个对话框，要求我承认删除。它应该根据article_id打开相同的对话框。我不太了解JavaScript（除了菜鸟的东西）。

每个代码的 PHP 的一部分：

foreach ($show_articles as $blog):
    echo "<div class='blog_articles_bottom_container'>";
        echo "<div class='blog_articles_bottom_title'>".$blog['title']."</div>";
        echo "<div class='blog_articles_bottom_date'>".date('j-m-Y, H:m', $blog['created_at'])."u</div>";
        echo "<div class='blog_articles_bottom_comments'>".$amount_comments['total']."</div>";
        echo "<div class='blog_articles_bottom_likes'>".$amount_likes['total']."</div>";
        echo "<div class='blog_articles_bottom_actions'>";
            echo "<div id='article_edit' class='blog_articles_bottom_actions_edit'></div>";
            echo "<div id='btn-article-remove-dialog-".$blog['article_id']."' class='blog_articles_bottom_actions_remove'></div>";
            echo "<div id='article_settings' class='blog_articles_bottom_actions_settings'></div>";
            echo "<div id='clear'></div>";
        echo "</div>";
        echo "<div id='clear'></div>";
    echo "</div>";
endforeach;

如您所见，删除按钮具有以下 id：#id='btn-article-remove-dialog-".$blog['article_id']."，它成功输出：id='btn-article-remove-dialog-1"作为第一篇文章。

这是对话框部分：

<div id="blog_articles_dialog-" class="blog_articles_dialog" title="Confess deletion">
Are you sure you want to delete </b>'".$blog['title']."'</b> ?
</div>

这是 JavaScript 部分：

$(document).ready(function(){
    $( "#blog_articles_dialog-"+article_id).dialog({ autoOpen: false, resizable: false, draggable: false, closeOnEscape: true, dialogClass: "alert-dialog", width: "380", modal: true });
    $( "#blog_articles_dialog-"+article_id).dialog({ hide: { effect: "clip", direction: "vertical", duration: 350 } });
    $( "#btn-article-remove-dialog-"+article_id).click(function(article_id) {
        $( "#blog_articles_dialog-"+article_id).dialog( "open" );
        console.log(article_id);
    });
});

我的问题如下;如何存档？它在我的控制台日志中回显了"未捕获的引用错误：未定义article_id"。试图解决这个问题，但正如我所说，我是一个菜鸟。

谢谢

编辑 #1 （@ViktorCarlén）它没有，所以我添加了以下内容：

var article_id = $("#blog_articles_dialog-"+article_id);

"未定义article_id"错误消失了，但我得到了"未捕获的错误：语法错误，无法识别的表达式：#blog_articles_dialog-[对象对象]"作为回报:(

让我们剪掉对话框 id 中的最后一行：

<div id="blog_articles_dialog" class="blog_articles_dialog" title="Confess deletion">
    Are you sure you want to delete </b>'".$blog['title']."'</b> ?
</div>

然后跳过不存在的article_id变量。（像这样的空函数调用与 $（document）.ready（）相同;)

$(function () {
    $("#blog_articles_dialog").dialog({ autoOpen: false, resizable: false, draggable: false, closeOnEscape: true, dialogClass: "alert-dialog", width: "380", modal: true });
    $("#blog_articles_dialog").dialog({ hide: { effect: "clip", direction: "vertical", duration: 350 }});
});

然后将： data-article-id="'.$blog['article_id'].'" 添加到触发删除对话框的元素中，以下内容应该有效：

$(".blog_articles_bottom_actions_remove").on('click', function (event) {
     $("#blog_articles_dialog").dialog("open");
     var article_id = $(this).attr('data-article-id');
     console.log(article_id);
});

告诉我您是否希望我详细说明它是否不清楚或无法正常工作。