Question

这里我正在做一些动画，同时删除带有一些背景颜色变化然后向上滑动的li元素。当我在我的代码中使用$(this).parent()时，它不起作用，但当我使用$(this).parent()作为变量时，它可以工作。我不明白为什么会这样。这是我的整个代码。您可能需要包含jquery库来运行此代码。

HTML

<div id="main">
    <ul class="update">
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<a href="#" id="1" class="delete_button">X</a></li>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<a href="#" id="2" class="delete_button">X</a></li>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<a href="#" id="3" class="delete_button">X</a></li>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<a href="#" id="4" class="delete_button">X</a></li>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<a href="#" id="5" class="delete_button">X</a></li>

    </ul>
</div>

CSS -

<style type="text/css">
#main
{
    width:500px;
    margin:50px auto;
}

.update
{
    list-style-type:none;
}

.update li
{
    border-bottom:#dedede dashed 1px;
    margin-bottom:15px;
    padding-bottom:15px;
}

.delete_button
{
    text-decoration:none;
    color:#d02b55;
    margin-left:10px;
    font-weight:bold;
    float:right;
}

.delete_button:hover
{
    text-decoration:underline;
    color:#d02b55;
}
</style>

JavaScript -

（不起作用）

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.color-2.1.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".delete_button").click(function(){
        var id = $(this).attr("id");
        var dataString = 'id='+id ;

        $.ajax({
            type: "POST",
            // url: "ajax/delete-comment.php",
            data: dataString,
            cache: false,
            beforeSend: function(){
                $(this).parent().animate({
                'backgroundColor':'#fb6c6c'}, 300).animate({
                opacity: 0.5 }, "slow");
            }, 
            success: function(){
                $(this).parent().slideUp('slow', function(){
                    $(this).remove();
                    });
            }
        });
        return false;
    });
});
</script>

（它有效）

var parent = $(this).parent();
beforeSend: function(){
                parent.animate({
                'backgroundColor':'#fb6c6c'}, 300).animate({
                opacity: 0.5 }, "slow");
            }, 
            success: function(){
                parent.slideUp('slow', function(){
                    $(this).remove();
                    });
            }

为什么使用变量工作而不是？

我把演示文稿放在JSFiddle但是正确的代码在我的本地工作似乎并没有在那里工作。你能告诉我为什么它不能用于JSFiddle吗？

Answer 1

问题在于，当你调用this.parent时......'这个'并不是指你的按钮。这就是为什么如果你将this.parent分配给回调之外的变量就可以了。

您可以将Ajax查询的上下文设置为调用它的按钮，将“context”属性添加到Ajax调用并将其设置为如下所示：

 $.ajax({
        type: "POST",
        // url: "ajax/delete-comment.php",
        data: dataString,
        cache: false,
        context: this,
        beforeSend: function(){
            $(this).parent().animate({
            'backgroundColor':'#fb6c6c'}, 300).animate({
            opacity: 0.5 }, "slow");
        }, 
        success: function(){
            $(this).parent().slideUp('slow', function(){
                $(this).remove();
                });
        }
    });

这样回调中的'this'指的是你的按钮。希望很清楚。

Answer 2

正确的答案是在jQuery AJAX回调中，this是指jQuery XHR Object而不是元素。

如果我使用$（this）.parent（），删除带有颜色动画的元素不起作用，但如果我将它用作变量，则可以正常工作 - jQuery

2 个答案: