javascript - 使用article_id按钮打开对话框

Question

目前，我正在设置一个管理面板，其中包含一些针对我的文章的快速操作(在本例中为删除文章)。一旦我进入垃圾桶，就会打开一个对话框并要求我承认删除。它应该根据article_id 打开相同的对话框。我不太了解 JavaScript(除了菜鸟的东西)。

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;

如您所见，删除按钮具有以下 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);
    });
});

我的问题如下；我如何存档这个？它当前在我的控制台日志中回显“ Uncaught ReferenceError :article_id 未定义”。试图解决这个问题，但正如我所说，我是个菜鸟。

谢谢

编辑 #1 (@ViktorCarlén)它没有，所以我添加了以下内容:

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

“article_id 未定义”错误消失了，但我得到了“未捕获错误:语法错误，无法识别的表达式:#blog_articles_dialog-[object Object]”返回:(

Answer 1

让我们剪掉对话框 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);
});

如果不清楚或无法正常工作，请告诉我是否需要我详细说明。