Question

我正在使用PM系统并添加了删除消息功能。我有一个检查message_id和message_title的表单。表单发布到delete_message.php页面，其中包含删除消息的查询。这是通过Javascript完成的，因为我不希望页面刷新。

我有两个功能：

function deleteMessage() {
    $.ajax({
        url: "message/delete_message.php",
        type: "POST",
        data: $("#delMsgForm").serialize(),
        success: function(data,textStatus,jqXHR){   finishDeleteMessage(data,textStatus,jqXHR); }
    });
}

function finishDeleteMessage( data , textStatus ,jqXHR ) {
    $(".inboxMessage").slideUp('slow');
}

目前，当我点击删除按钮（垃圾桶的图像）时，它会删除消息而不重新加载页面，作为画龙点睛，它会滑动消息所在的divclass（inboxMessage）。因为我告诉它向上滑动这节课，它会滑动每条消息。这是我的代码片段，包含类和表单：

<div class="inboxMessage">
<div class="inboxMessageImg NoNewMsg"></div>
<div class="inboxMessageHeader">
<a id="ajax" class="inboxMessageLink" onclick="showMessage('.$row['message_id'].')">'.$row['message_title'].'</a>
<p class="inboxMessageStatus Read">'.$inboxMessageStatus_Read.'</p>
</div>
<div class="inboxMessageDescription">'.$inboxMessageDescription.'</div>
<div class="inboxMessageActions">
<form id="delMsgForm" name="delMsgForm" action="message/delete_message.php" method="post">
<input type="hidden" id="msgTitle" value="'.$row['message_title'].'" name="message_title">
<input type="hidden" id="msgID" value="'.$row['message_id'].'" name="message_id">
</form>
<input type="submit" id="ajax" value="" name="deleteMessageButton" class="deleteMessageIcon" onclick="deleteMessage()">
</div>
</div>

我想要它只是滑动用户刚刚删除的消息。我知道这必须通过告诉javascript只滑动包含message_id和/或message_title的已删除邮件来完成。

我尝试了几件事，但没有任何爱。我也不熟悉javascript / ajax。任何帮助都将非常感激。

干杯：）

Answer 1

你从哪里调用deleteMessage？间接函数调用通过另一个知道你的“垃圾桶”的父项的函数，并可以调用该特定的那个。

function deleteMessage (element) {
    //element will be clicked button
    var container = $(element).closest("div.inboxMessage"),
        //container div including the trashcan
    $.ajax({
        url: "message/delete_message.php",
        type: "POST",
        data: $("#delMsgForm").serialize(),
        success: function(data,textStatus,jqXHR){   
            finishDeleteMessage(container); 
        }
    });        
});

这将是你的按钮

<input type="submit" id="ajax" value="" name="deleteMessageButton" class="deleteMessageIcon" onclick="deleteMessage(this)">

Answer 2

显然，你有更多的课程inboxMessage的div。由于您要添加此代码：

 $(".inboxMessage").slideUp('slow');

..该类的所有div将删除。如果您只想删除一个div，请为其指定唯一ID或数据属性并以此方式隐藏。

例如：将message-id添加到div ..

<div class="inboxMessage" id="(message_id)">

..并使用..

 $(".inboxMessage#message_id").slideUp('slow');

..向上滑动右边的div。

编辑：

将您的消息ID添加到div和函数deleteMessage()，因此它将是deleteMessage(message_id)。

function deleteMessage(message_id) {
    $.ajax({
        url: "message/delete_message.php",
        type: "POST",
        data: $("#delMsgForm").serialize(),
        success: function(){   finishDeleteMessage(message_id); }
    });
}

function finishDeleteMessage(message_id) {
    $(".inboxMessage#"+message_id).slideUp('slow');
}

仅滑动已删除的邮件

2 个答案: