1

MySQL からいくつかの情報を取得するループを含む複数列 (2 列の div) があります。(ユーザー名、時間、メッセージ)。

+---------------------------+   +---------------------------+
|  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:)   |
                                +---------------------------+

下の 2 番目のポストが上に移動して代わりになる代わりに、要素の高さを削除したままにします。現在の問題は、要素の高さと自動調整をチェックする方法のjQueryにあると思いますが、右側の別のものを削除すると正しく上がるかどうかはわかりません。

ここに私が現在使用しているコードがあります。

それのCSSを使用した左右の列を使用したjQueryの複数列の高さ調整>

$(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 を読み取らないため、右側の空白も削除すると空白の空白のみが削除されるためです。

4

2 に答える 2

1

問題は、削除したボックスの下にあるボックスのドム位置が原因​​です。

これは手早く汚いハックです：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"...)

于 2013-07-06T17:08:05.477 に答える