1

嗨，当有人想删除帖子时，我需要使用警报消息要求她/他删除或取消

我试过了，但这是默认的警报浏览器

<button onclick="return confirm('are you sure you want to delete {{obj.title}}')" class="bt mx-auto"><a href="{% url 'posts:post-detail' obj.id %}"><img src="{% static 'icons/delete.svg' %}" alt=""></a></button>

我想使用这个警报

alertify.prompt("are you sure you want to delete ", "{{obj.title}}",
  function(evt, value ){
alertify.success('Ok: ' + value);
  },
function(){
alertify.error('Cancel');
  });

提醒

但我不确定我应该将该脚本放在模板中的哪个位置？我在按钮删除内使用它，替换为confirm()但似乎不起作用感谢您的帮助..

4

1 回答 1

1

...我想在用户想要删除帖子时询问用户，（同意或不同意）如果选择同意（ok），那么帖子将被删除，如果选择不同意（取消）对帖子不做任何事情

为了达到所需的结果，您需要更改一些 html 以传递当前元素（请参阅：this 关键字），并且像示例部分中报告的那样，您可以将一个名为showAlert的函数附加到窗口对象：

window.showAlert = function(msg, title, ele) {
    var that = ele;
    alertify.prompt(msg, title,
            function(evt, value){
                ele.closest('div').remove();
            },
            function(){
                // do nothing 
            });
}

并将您的按钮更改为：

<button onclick="return showAlert('are you sure you want to delete',  '{{obj.title}}')".....


<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.rtl.min.css"/>
<script type="text/javascript">
window.showAlert = function(msg, title, ele) {
    var that = ele;
    alertify.prompt(msg, title,
            function(evt, value){
                ele.closest('div').remove();
            },
            function(){
                // do nothing
            });
}
</script>


<div>
    <p> This is the first post</p>
    <button onclick="return showAlert('are you sure you want to delete',  'post n. 1', this)">Click Me</button>
</div>

<div>
    <p> This is the second post</p>
    <button onclick="return showAlert('are you sure you want to delete',  'post n. 2', this)">Click Me</button>
</div>
<div>
    <p> This is the third post</p>
    <button onclick="return showAlert('are you sure you want to delete',  'post n. 3', this)">Click Me</button>
</div>

于 2020-08-18T21:38:03.493 回答