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）它似乎不起作用？ / p>

我哪里错了？

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-属性来标识后续/后续元素所属的用户：

<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！

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

无法向成功函数添加变量

1 个答案: