javascript - 隐藏选定类别的特定行

Question

我有这张表:

while ($row = mysqli_fetch_array($result)) {
echo '<tr>';
    echo '<td> <button value="' . $row['id'] . '" class="btn btn-danger" id="delete"><i class="icon-remove icon-white"></i> Delete</button> </td>';
echo '</tr>';
}

结果如下:

我正在使用此 JavaScript 来删除特定行:

<script type="text/javascript">
    $('.btn-danger').click(function() {
        alert("I am an alert box!");
        var one = $(this).val();
        $.post("post.php", { 
            id: one
        }, function(data) {
            if (data.response == 1) { 
                $(this).closest('tr').fadeOut(1000); //this line does not work 
            } 
            if (data.response == 0) { 
                alert("nope");
            } 
        }, "json");
    });
</script> 

淡出不起作用。不会发生褪色现象。我不确定出了什么问题，但如果我使用 id它会起作用的。 $('#delete').closest('tr').fadeOut(1000);但问题是只有顶行会淡出，我不想使用 id 。我正在研究类，但我仍然不明白如何让它发挥作用。

请帮助我并提前致谢。

Answer 1

完成处理程序中的

this 并不引用单击的按钮，这就是问题所在。您可以使用闭包变量来解决该问题。

$('.btn-danger').click(function () {

    alert("I am an alert box!");
    var $this = $(this),
        one = $this.val();
    $.post("post.php", {
        id: one
    }, function (data) {
        if (data.response == 1) {
            $this.closest('tr').fadeOut(1000); //this line does not work 
        }
        if (data.response == 0) {
            alert("nope");
        }
    }, "json");

});