php - 删除后的 jQuery/AJAX 在多列 div 内留下空白区域

Question

我有一个多列（两列 div），带有一个从 MySQL 检索一些信息的循环。（用户名、时间、消息）。

+---------------------------+   +---------------------------+
|  StackOverflow User       |   | StackOverflow User2       |
|  11:31 AM            X    |   | 11:37 AM              X   |
|                           |   |                           |
| Stack Overflow is a       |   | Tags make it easy to find |
| question and answer site  |   | interesting questions.    |
| for professional and      |   | All questions are tagged  |
| enthusiast programmers.   |   | with their subject areas. |
| It's built and run by you |   | Each can have up to 5     |
| as part of the Stack      |   | tags, since a question    |
| Exchange network of Q&A   |   | might be related to       |
| sites.                    |   | several subjects.         |
|                           |   | Click any tag to see a    |
+---------------------------+   | list of questions with    |
                                | that tag, or go to the    |
+---------------------------+   | tag list to browse for    |   
| StackOverflow User2       |   | topics that interest you. |
| 11:56 AM             X    |   +---------------------------+
|                           |   
| This post is not to       |   +---------------------------+
| explain anything but just |   | Stackoverflow User9       |
| to show how the divs are  |   | 2 days ago            X   |
| are the current moment    |   |                           |
| and to describe their     |   | Whoever sees this post    |
| issue that I'm unable     |   | I appreciate for the help |
| to know what is causing   |   | And who ever looks for    |
| if it's jQuery type of    |   | help in the same subject  |
| mansory or the Ajax.      |   | I hope you find what you  |
+---------------------------+   | are looking for as it can |
                                | be tough to find something|
                                | that you're both needing  |
                                | help with.. sometimes:)   |
                                +---------------------------+

我当前的问题是，如果我单击 X 按钮删除帖子，它确实像我设置的那样完美删除它，但删除后它留下框的高度而不是底部框（框下方的框已删除) 占据它的空间并移动到它的位置。问题如下：

单击左侧第一个帖子的删除按钮后。

                                +---------------------------+
                                | StackOverflow User2       |
                                | 11:37 AM              X   |
                                |                           |
                                | Tags make it easy to find |
                                | interesting questions.    |
                                | All questions are tagged  |
                                | with their subject areas. |
                                | Each can have up to 5     |
                                | tags, since a question    |
                                | might be related to       |
                                | several subjects.         |
                                | Click any tag to see a    |
                                | list of questions with    |
                                | that tag, or go to the    |
+---------------------------+   | tag list to browse for    |   
| StackOverflow User2       |   | topics that interest you. |
| 11:56 AM             X    |   +---------------------------+
|                           |   
| This post is not to       |   +---------------------------+
| explain anything but just |   | Stackoverflow User9       |
| to show how the divs are  |   | 2 days ago            X   |
| are the current moment    |   |                           |
| and to describe their     |   | Whoever sees this post    |
| issue that I'm unable     |   | I appreciate for the help |
| to know what is causing   |   | And who ever looks for    |
| if it's jQuery type of    |   | help in the same subject  |
| mansory or the Ajax.      |   | I hope you find what you  |
+---------------------------+   | are looking for as it can |
                                | be tough to find something|
                                | that you're both needing  |
                                | help with.. sometimes:)   |
                                +---------------------------+

删除元素的高度，而不是下面的第二个帖子上升并取而代之。我相信当前的问题在于 jQuery 是如何检查元素高度和自动调整的，但我不确定我是否删除了右边的另一个它会正确上升。

这是我目前正在使用的代码。

jQuery多列高度调整左右列与它的CSS>

$(document).ready(function()
{
    var left_column_height = 0;
    var right_column_height = 0;
    var items = $('.item');

    for (var i = 0; i < items.length; i++)
    {
        if (left_column_height > right_column_height)
        {
            right_column_height+= items.eq(i).addClass('right').outerHeight(true);
        } else {
            left_column_height+= items.eq(i).outerHeight(true);
        }
    }
});

.wrap { width: 100% }
.wrap .item { width: 49%;float: left;clear: left; }
.wrap .item.right { float: right;clear: right; }

Ajax/jQuery 用于删除帖子。

$(document).ready(function() 
{
    $('.postdelete').on("click",function() 
    {
        var iD = $(this).attr("id");
        var dataString = 'post_iD='+ iD;

        if(confirm("Sure you want to delete this update?"))
        {
            $.ajax(
            {
                type: "POST",
                url: "load_ajax/delete_message_ajax.php", // just passes a isset $_POST.
                data: dataString,
                cache: false,
                success: function(html)
                {

                    $("#stbody"+iD).slideUp()("slow",function(){ $("#stbody"+iD).remove().slideUp("slow"); } );
                }
            });
        }
        return false;
    });
});

Html Normal Div（可能不需要，所以我会做一些东西来展示它是如何的）

<div class="wrap" id="php get id">
    <div class="item">
        <div class="box">
            <a>StackOverflow User</a>
            <a>11:31 AM</a>
            <a>MESSAGE</a>
        </div>
    </div>
</div>

据我所知，我只是“图”，这似乎更明显的是，问题肯定来自 jQuery 多列列表或 AJAX 帖子。我知道那里有 Mansonry 和其他几个脚本，但我会选择更小的代码来完成同样的事情，而且我只会在这里使用它，所以我宁愿坚持一小段代码而不是移动到更大的代码并给服务器造成压力。

更新 2：经过测试，我认为问题出在 jQuery 中，因为它只读取 .right 而不是 .left，所以如果我也删除右边的空白，它只会删除空白。

score 2 · Accepted Answer

第一：不要使用 $('#id')，只使用 $('.class') 用于带有 $(this) 的事件来限定元素的范围，（#id 对多个操作产生一些问题）。

在 jquery 中创建一个循环：

var items = $('.item');
items.each(function({
   ...
}); // not for(...){} with .lenght....

但这对您来说不是一个好的解决方案...

为什么不使用 .height() 来获得列的高度？

HLeft = $('.column.left').height();
HRight = $('.column.right').height();

隐藏块：

$('.postdelete').on("click",function() {

    par=$(this).parents('.item');
    dataString = par.serialize('input');

... ajax sucess ...

        par.slideUp("slow",function(){ 
            $(this).remove(); 
        });

Html（不要忘记序列化的输入）

<div class="column">
    <div class="item">
        <input type="hidden" name="post_id" value="myId" />
        <div class="box">
            <a>StackOverflow User</a>
            <a>11:31 AM</a>
            <a>MESSAGE</a>
        </div>
    </div>
</div>

对于样式删除：

clear:left;
clear:right;

使用这样的东西：

.column       { width:50%; height:auto; margin:0; padding:0;  }
.column.left  { float:left;}
.column.right { float:right;}
.item         { width:100%; height:auto; float:left; }

再见

score 1 · Accepted Answer

您的问题是由您删除的盒子下方的 dom 位置引起的。

这是一个快速而肮脏的黑客攻击：http: //jsfiddle.net/W3WEr/6/

$('.postdelete').on("click",function() 
{
    item = $(this).parents('div.item');
    item.slideUp("slow",function(){
        // Hack Dom position
        item.before( $('#last') );

        item.remove();
    });
    return false;
});

当您删除左侧的第一个块时，您需要更改其后每个节点的位置（因此浮动样式以它们必须的方式工作）。

简而言之，在您的 ajax 请求之后，您必须扫描每个节点并将其以正确的顺序放置在 dom 中。

当然，这只是一个快速破解，但我认为它为您提供了解决此问题的方法。

哦！顺便说一句：slideUp("slow")，而不是slideUp()("slow"...)

php - 删除后的 jQuery/AJAX 在多列 div 内留下空白区域

2 回答 2

Related

Reference