Javascript 使用项目id按钮打开对话框

目前，我正在为我的文章设置一个adminpanel，其中包含一些快速操作（在本例中，删除文章）。一旦我撞到垃圾桶，就会打开一个对话框，让我承认删除了。它应该会根据文章id打开相同的对话框。我真的不太懂JavaScript（除了noobie的东西）

PHP foreach代码的一部分：

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;

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

$(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);
    });
});

我的问题如下:；如何存档此文件？它当前在我的控制台日志中显示echo的“未捕获引用错误：未定义项目id”。试图解决这个问题，但正如我所说，我是一个笨蛋

谢谢

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

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

---

“文章id未定义”错误消失了，但我得到了“未捕获错误：语法错误，无法识别的表达式：#博客文章对话框-[object object object]”作为回报：（

让我们剪下对话框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>

然后将：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);
});

---

告诉我是否需要我详细说明它是否不清楚或工作不正常。

在您提供的javascript中，变量'article_id'没有定义在任何地方。它是否存在于此范围之外？@ViktorCarlén没有，因此我将此添加到它中（不确定是否正确，但旧错误消失，出现了新错误）var article_id=$（“#blog_articles_dialog-”+article_id）；当然，为什么我没有想到使用数据属性：|非常感谢，它现在工作得很好！一个简单的问题是，将对话框放在foreach中是否明智？那么，你会为每个循环创建一个相同的对话框，这不是很有效。但我怀疑它对整体性能有什么大的影响，这可能是错误的缺点。你说得对。无论如何，再次感谢你！

$(".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);
});