2

消える削除アニメーションコードがあり、div「parent_parent」全体を消したいのですが。

これがHTMLです

<div class="parent_parent">
    <div class="parent">
        <a href="?delete=1" class="delete_link"></a>
    </div>
</div>

そして、これがparent_parentdivを非表示にするjqueryコードの一部です。

$(document).ready(function() {
    $('a.delete_element').click(function(e) {
        e.preventDefault();
        var parent = $(this).parent();
        $.ajax({
            type: 'get',
            url: 'delete.php',
            data: 'ajax=1&delete=' + parent.parent().attr('id').replace('sort_', ''),
            beforeSend: function() {
                parent.parent().animate({
                    'backgroundColor': '#fff'
                }, 300);
            },
            success: function() {
                parent.parent().slideUp(300,function() {
                parent.parent().remove();
                });
            }
        });
    });
});​

しかし、これまでのところアニメーションは発生しませんが、片方の親を呼び出すだけで、内部のdivは消えます。エラーメッセージも表示されません。

4

2 に答える 2

4

あなたのコードはあなたがやろうとしていることに対してまだ複雑すぎます。これの方が良い：

// $(function(){ is shorthand for $(document).ready(function(){
$(function() {
    $('a.delete_element').click(function(e) {
        e.preventDefault();
        // Don't give thing ambiguous names like 'parent'
        // You should change your class names too.
        var container = $(this).closest(".parent_parent");
        $.ajax({
            type: 'get',
            url: 'delete.php',
            // You had multiple instances of parent.parent(), but no direct usage of parent alone
            // This is a clue that you can simplify parent.parent() since you are traversing to the same element every time
            data: 'ajax=1&delete=' + container.attr('id').replace('sort_', ''),
            beforeSend: function() {
                containter.animate({
                    'backgroundColor': '#fff'
                }, 300);
            },
            success: function() {
                container.slideUp(300, function() {
                    // Do not repeat the same selector within a callback
                    // That's what `this` is for
                    $(this).remove();
                });
            }
        });
    });
});​

このコード例をそのまま使用すると、機能します。

于 2012-04-05T02:14:07.737 に答える
1

おそらく、デフォルトのアンカータグアクションを妨げていません。また、複数回使用する参照をキャッシュすることもできます。動作するコードは次のとおりです。

function(e) {
    e.preventDefault();
    var theParent = $(this).closest(".parent_parent");    
    theParent.slideUp(300, function() {
        theParent.remove();
    });
};

フィドル： http： //jsfiddle.net/VXEUM/

closest()を2倍にする代わりに使用していることにも注意してくださいparent()。ただのスタイルの好み。さらに、要素がより深くネストされている場合でも、を使用して機能しclosest()ます。

于 2012-04-05T02:20:46.423 に答える