jquery - 无法将变量添加到 success 函数

Question

这是我的 ajax jquery:.........

$(function () {
    $(".follow").click(function () {
        var element = $(this);
        var I = element.attr("id");
        var info = 'id=' + I;

        $.ajax({
            type: "POST",
            url: "follow.php",
            data: info,
            success: function () {
                $('.follow' + I).fadeOut(200).hide();
                $('.following' + I).fadeIn(200).show();
            }
        });
        return false;
    });
});

我的html是:

echo "<tr>";

    echo '<td>'. $table["username"]. '</td>'.'<td>'.'<a href="#" id="'.$table['id'].'" class="follow">'.'</a>' . '<a href="#" id="'.$table['id'].'" class="following" style="display:none">'.'</a>' . '</td>';

    echo "<tr>";

(处于 while 循环中)

成功后，我尝试淡出关注按钮(及其 ID)并将其替换为具有相同 ID 的关注按钮 - 但是，当使用 (+ I) 时，它似乎不起作用？

我哪里出错了？

Answer 1

如果您将一些 HTML 与您的代码一起发布，以便我们了解它应该如何工作，将会有所帮助。

无论如何，从我在您的代码中看到的内容来看，我认为它看起来像这样:
看起来我推导出的标记是是的，你的标记归结为:

<a class="follow" id="foobar">Follow</a>
<a class="following" id="foobar">Following</a>

如果您想选择类 .following 和 ID foobar 的元素，您可以编写 $('#foobar.following') 或 $('.following#foobar')。因此您的代码必须调整为:

$('.follow#' + I).fadeOut(200).hide();
$('.following#' + I).fadeIn(200).show();

但是，这存在一个更根本的问题:ID 唯一标识一个元素，这意味着同一页面上不能有两个具有相同 ID 的元素。上面的 HTML 无效，并且选择器与类选择器的限定过度。更好的解决方案是使用 data- 属性来标识 follow/following 元素属于哪个用户:

<a class="follow" data-userid="foobar">Follow</a>
<a class="following" data-userid="foobar">Following</a>

然后您将存储数据属性而不是 ID:

var I = element.data("userid");

并选择使用数据属性:

$('.follow[data-userid=' + I + ']').fadeOut(200).hide();
$('.following[data-userid=' + I + ']').fadeIn(200).show();

如前所述，您实际上不再需要选择 .follow 元素。只需使用元素!

element.fadeOut(200).hide();
$('.following[data-userid=' + I + ']').fadeIn(200).show();