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;
}); ´

现在，当我点击我的删除链接时，我打开了我的对话框，但我也删除了我的新闻而没有回答我的对话框。

你知道如何使用我的对话框，如果我点击是，我会删除，但如果我点击否我只是关闭我的对话框？

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

我还看到if(confirm(Do you really want to delete this image?){my ajax here}的例子，也很容易做到。

但是我试着用我自己的对话做，像这样我真的不知道我们怎么做。

你能帮我个忙吗？

我在尝试什么：

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

为您添加一些标识符“是/否”链接（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>
将处理程序添加到以下链接：

$("a#delete").click(function(){ //your post method }); $("a#toggleDialog").click(function(){ //hide dialog });
将打开的对话框处理程序更改为仅显示对话框：

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

P.S。你也应该将delid变量传递给“是”处理程序。

仅当用户单击我自己的对话框的“是”链接时才删除图像

1 个答案: