2

这是我的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) 时它似乎不起作用？

我哪里错了？

4

1 回答 1

4

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

无论如何，从我在您的代码中看到的内容来看，我认为它看起来像这样：
看起来我推断的标记是正确的，您的标记归结为：

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

如果你想选择带有 class.following和 ID的元素foobar，你可以写$('#foobar.following')or $('.following#foobar')。因此，您的代码必须调整为：

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

但是，这样做还有一个更根本的问题：ID 唯一地标识一个元素，这意味着您不能在同一页面上拥有两个具有相同 ID 的元素。上面的 HTML 无效，并且选择器被类选择器过度限定。更好的解决方案是使用data-属性来识别关注/关注元素属于哪个用户：

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

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

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

并使用 data 属性进行选择：

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

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

element.fadeOut(200).hide();
$('.following[data-userid=' + I + ']').fadeIn(200).show();
于 2012-12-24T11:45:24.283 回答