Question

if(count($father1)!=0) { 
            for($i=0;$i<count($father1);$i++) { 
                if($father1[$i][ 'sbs_f_userid']==$id) { 
                    $pc_pic=$father1[$i][ 'sbs_f_face']. '.'.$father1[$i][ 'sbs_f_format']; 
                    echo '<div class="fpic"><img src="'.$img_loc.'del-but.png" class="myfamily29 dpic f" alt="Click to Delete" title="Click to Delete"/><div class="kpic f"><img src="'.$img_gearup.$pc_pic. '" width="47" height="47" ></div></div>';
?>

我在我的程序中使用此代码。 FPIC 类创建一个具有棕色边框并且具有父pic和 del-but.png 图像的框。所以当用户点击del-but.png时，下面的进程就会运行。

$(".dpic").click(function () {

                                if ($(this).hasClass("f")) {q = father ; var ddpic = $(this).parent('div').find(".kpic").find("img").attr("src"); var that = $(this).parent('.fpic');}
                                    lbox = new LadduBox();
                                    lbox.init({
                                                "width": 485,
                                                "height": 232,
                                                "HTML": '<div style="width:488px; height:235px; background:url('+img_loc+'bg4.png) no-repeat;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="488" height="152" style="font-family:arial; font-size:18px; font-weight:bold; color:#ffffff;"><tr><td align="right" height="50" valign="top" colspan="2"></td></tr><tr><td align="center">Are you sure you want to delete the picture?</td></tr><tr><td align="center"><div class=" abc yes">YES</div><div class="no" id="btnClose">NO</div></td></tr></table></div>',
                                                'btnCloseId': '#btnClose'
                                    });
                                    lbox.fire();
                                    $(".abc").bind("click", function () {
                                            $.blockUI({ message: '<h3>deleting...</h3>', css: {
                                                    border: 'none',
                                                    padding: '15px',
                                                    'z-index': '1991000',
                                                    background:  'url('+img_loc+'bg4.png)',
                                                                 '-webkit-border-radius': '10px',
                                                                 '-moz-border-radius': '10px',
                                                    color: '#fff'
                                            }
                                            });
                                    $.post("delete_pic.php", {
                                            "ddpic": ddpic,
                                            "user": q,
                                            "uid": sbs.userid
                                    }, function (data) {
                                    if (data.result == "1") {
                                        if( q == "kid"){ $(".kidd").find("img").attr('src',''+img_loc+'blank_face.png');}
                                            if( q == "mother"){ $(".mat").find("img").attr('src',''+img_loc+'blank_face.png');}
                                                if( q == "father"){ $(".fat").find("img").attr('src',''+img_loc+'blank_face.png');}
                                    }
                                                    that.remove();
                                                    setTimeout($.unblockUI, 100); 
                                    }, "json");
                                    lbox.closeladdubox();
                                    });
                    });  
                    }
    });

用户点击后，它会问你是否真的想要删除？如果用户点击“是”按钮，则删除整个班级 FPIC

Answer 1

var that = $(this).parent('.fpic');

that指向父级，而不是图像。

你正在做

that.remove();将删除fpic类

你必须

that.find('img').remove();

替换图片，你可以做到

that.find('img').attr('src',srcOfAnImage);代替.remove()

Answer 2

整个div正在删除，因为您已将其定义为

var that = $(this).parent('.fpic'); // i.e. <div class="fpic">

然后在你正在做的第二个脚本中

that.remove();

删除内部的每张图片：

that.find('img').remove()

<强>更新

删除后，添加新图像。你必须这样做：

that.append('<img src="path\to\image.png" />');

简而言之，你必须这样做：

that.find('img').remove() // remove all the images inside
that.append('<img src="path\to\image.png" />'); // add a new image

整个div正在删除而不是图像

2 个答案: