2

我有一个消失的删除动画代码，我想让整个 div“parent_parent”消失。

这是HTML

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

这是使 parent_parent div 消失的 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()而不是在parent(). 只是一种风格偏好。另外，如果您的元素嵌套更深，它仍然可以使用closest().

于 2012-04-05T02:20:46.423 回答