Question

现在我的页面的源代码具有以下结构：

<span id='648746' class='topic'>linkedin
<a href='' class='hidden unblacklist' onclick='return false'>Restore</a>
<a href='' class='blacklist' onclick='return false'>[X]</a>
</span><br />

在页面加载时，隐藏带有文本“恢复”的链接。当用户点击该链接时，我想将hidden类添加到刚刚点击的链接中，然后我想从hidden中的其他链接中删除<span></span>类。我可以让第一部分工作，但我在第二部分遇到困难。这是我的尝试：

$(this).addClass("hidden");
console.log($(this).closest("span"));
$(this).closest("span").hasClass("unblacklist")[0].removeClass("hidden");

其中一个最大的困难是另一个链接有两个类：“hidden”和“unblacklist”。我想我会知道如何为一个班级做这件事，但游戏会改变两个班级。

提前致谢！

编辑：这么多答案。所有这些都有效！非常感谢你们。

Answer 1

我的解决方案将使用toggleClass()：

$(this).parent().children().toggleClass('hidden');

Answer 2

使用.siblings（）：

$(this).addClass("hidden").siblings().removeClass("hidden");

Answer 3

您可以使用.siblings()，它可以返回DOM中的所有兄弟节点或接受jQuery过滤器。

$(this).addClass("hidden");
$(this).siblings('a.unblacklist').removeClass("hidden");

只需将此代码添加到链接的click（）处理程序中即可。

Answer 4

你是第三行是错的。试试：

$(this).closest("span").find(".unblacklist").removeClass("hidden");

Answer 5

  $('a.blacklist').click(function(){
    $(this).addClass('hidden').siblings('a.unblacklist').removeClass('hidden');
    });

Answer 6

如果“恢复”链接始终位于“[X]”链接之前，则可以使用prev方法。

$(this).addClass("hidden");
$(this).prev().removeClass("hidden");

Answer 7

hasClass()仅告知元素是否公开了一个类。它返回一个布尔值，而不是一个jQuery对象，所以你不能链接它。

您正在寻找class selector：

$(this).closest("span").find(".unblacklist").removeClass("hidden");

也就是说，在您的情况下经常使用的模式是首先删除hidden类，通过匹配公开它的元素，然后将其添加到您选择的元素中：

$(this).closest("span").find(".hidden").removeClass("hidden");
$(this).addClass("hidden");

（以上假设您的标记可能比您的问题中的示例更复杂，因此它不会使用siblings()来匹配其他锚元素。）

如何选择包含类名实例的链接？

7 个答案: