Question

我使用以下AJAX调用来更新表格中的记录：

$(function() {
    $(".decline").click(function(){
        var element = $(this);
        var del_id = element.attr("id1");
        var order_id = element.attr("data-order1");
        $.ajax({
            type: "POST",
            url: "decline.php",
            data: {id1:del_id,order_id1:order_id},
            success: function(){cache: false}
        });
        $(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
            .animate({ opacity: "hide" }, "slow");
    });
});

当zi点击选择器类时，它会根据需要为div设置动画。在这里：.decline：

<div class="<?php echo ($accept == '1')?'showop':'show';?>">
<span class="growthcust">$<?php echo number_format($growth);  ?></span>
<span class="accepted"><a href="#" class="accept" id="<?php echo $id1; ?>" data-order="<?php echo $name; ?>"><input type="button" title="accept" value="Accept" /></a></span>
<span><a href="#"  class="decline"   id1="<?php echo $id1; ?>" data-order1="<?php echo $name; ?>"><input type="button" title="declined" value="Decline" /></a></span>
</div>

但我喜欢将该函数移动到我的AJAX调用，因此在AJAX调用成功后div隐藏了。

如何在成功时将其更改为动画？

Answer 1

在success回调中运行隐藏代码。您可以使用绑定的element变量访问当前元素。

$(function() {
    $(".decline").click(function(){
        var element = $(this);
        var del_id = element.attr("id1");
        var order_id = element.attr("data-order1");
        $.ajax({
            type: "POST",
            url: "decline.php",
            data: {id1:del_id,order_id1:order_id},
            // cache: false, // Not needed for POST, they're never cached
            success: function(){
                element.parents(".show").animate({ backgroundColor: "#003" }, "slow")
                    .animate({ opacity: "hide" }, "slow");
            }
        });
    });
});

在AJAX成功之后隐藏div

1 个答案: