javascript - 仅当用户单击我自己的对话框的 "yes"链接时删除图像

Question

我有一个包含一些图像的画廊，并且每个图像中都有一个用于删除它的链接:

<div class="galery"> 
  echo '<ul>';
  while ($result = $read->fetch(PDO::FETCH_ASSOC)){
    echo '<li id="'.$result['id'].'">';
    echo '<img src="'.$result['img'].'" />';
    echo '<a href="#" id="'.$resul['id'].'" class="galerydel">Delete</a>';
    echo '</li>';
      }
  echo '</ul>';
</div>

然后我有一个 jQuery 脚本来使用 ajax 删除我的图像: 我得到了每个图像的 id，然后我就有了我的 ajax $.post:

var url = 'deleteImages.php';
$('.galery ul').on('click','.galerydel',function(){
 var delid = $(this).attr('id');
 $.post(url,{action:'del_images',image:delid},function(){

 });
 return false;
});

然后我有我的 php.file，我在其中获取图像 id $imageId = $_POST['image']; 和操作 $_POST['action']; 然后我在图库表中进行删除，其中 id = $imageId。

这工作正常，但现在我想有一个对话框消息询问用户是否确定要删除图像， 所以我有一个像这样的对话框的 div:

<div class="delete_dialog">
    <div class="delete">
        <p>Do you really want to delete this image?</p>
        <a href="#">Yes</a>
        <a href="#">No</a>
    </div>
</div>

然后，当我单击链接删除每个图像时，我想显示此 div:

var url = 'deleteImages.php';
$('.galery ul').on('click','.galerydel',function(){
 var delid = $(this).attr('id');
 $('.delete_dialog').fadeIn("slow",function(){
        ('.delete').fadeIn("slow");
 });
 $.post(url,{action:'del_images',image:delid},function(){

 });
 return false;
}); ´

现在，当我单击删除链接时，我会打开我的对话框，但我也会在不回答对话框的情况下删除我的新闻。

你知道如何使用我的对话框吗？如果我单击"is"，我会进行删除，但如果我单击“否”，我只会关闭我的对话框？

我读了几个小时，我刚刚看到了使用 jQuery 对话框的示例，它很简单，因为我们可以使用按钮(是和否)。

我还看到了 if(confirm(你真的想删除这个图像吗？){我的 ajax 在这里} 的示例，这也很容易做到。

但是我试图用我自己的对话框来做，像这样我真的不知道我们如何才能做到这一点。

你能给我一些帮助吗？

我正在尝试什么:

var url = 'deleteImages.php';
$('.galery ul').on('click','.galerydel',function(){
 var delid = $(this).attr('id');
 $('.delete_dialog').fadeIn("slow",function(){
        ('.delete').fadeIn("slow");
 });
 $("a#delete").click(function(){
    $('.galerry ul li[id="'+ delid +'"]').css('background','red');
 $.post(url,{action:'del_images',image:delid},function(){
    window.setTimeout(function(){
        $('.galery ul li[id="'+ delid +'"]').fadeOut("slow");
    },500);
    $('.delete').fadeOut("fast",function(){
        $('.delete_dialog').fadeOut("fast"); 
    });
 });
 $("a#toggleDialog").click(function(){
   $('.delete').fadeOut("fast",function(){
        $('.delete_dialog').fadeOut("fast"); 
    });
});
});

Answer 1

1. 向“是/否”链接添加一些标识符(ID、属性或其他内容):

   <div class="delete_dialog"> <div class="delete"> <p>Do you really want to delete this image?</p> <a href="#" id="delete">Yes</a> <a href="#" id="toggleDialog">No</a> </div> </div>

2. 向链接添加处理程序，例如:

   $("a#delete").click(function(){ //your post method }); $("a#toggleDialog").click(function(){ //hide dialog });

3. 将打开的对话框处理程序更改为仅显示对话框:

   $('.galery ul').on('click','.galerydel',function(){ var delid = $(this).attr('id'); $('.delete_dialog').fadeIn("slow",function(){ ('.delete').fadeIn("slow"); }); });

附注您还应该通过 delid变量为"is"处理程序。