jquery - 如何在点击时更改类别

Question

我有结构:

<table style="width: 100%;">
    <tr>
        <td>
            <a href="#" class="yy">one</a>
        </td>

    </tr>
    <tr>
        <td>
            <a href="#" class="xx">Two</a>
        </td>

    </tr>
    <tr>
        <td>
            <a href="#" class="xx">Three</a>
        </td>

    </tr>
</table>

CSS:

.xx {
    border: 5px solid green;    
}

.yy {
    border: 5px solid red;    
}

现在点击<a>它的类应该改变。即，如果它是“xx”，那么它应该变成“yy”，反之亦然，以及 <a> 的其余部分应该保持原样， 我尝试了类似的东西(引用:how to change class of <a> tags in jquery)

$("a.xx").click(function() {
  $(".yy").not(this).removeClass("yy");
  $(this).toggleClass("yy");
});​

但它没有那样工作，我尝试调整代码，但它不起作用。有人可以帮忙吗？

编辑: 可能我的问题不够清楚: 如果我点击第二个<a>/任何其他<a>那么它应该变成红色，标签的其余部分应该变成绿色。即如果<a>具有红色，那么它应该变成绿色，其余部分应该是红色，反之亦然。

编辑以获得更明确的要求(基于 sje397 的回复): 假设我点击了 xx/yy 类，即我再次点击它，它应该改变，即如果 xx 那么它应该返回 yy，如果你再次点击它，它应该返回 xx。 –

Answer 1

$("a").click(function() {
  $(this).toggleClass("yy").toggleClass("xx");
});​

编辑(根据作者的评论)

如果您只想有一个突出显示的标签(即具有类“yy”)而所有其他标签具有类“xx”，您可以这样做:

$("a").click(function() {
  var $this = $(this); // this is just for performance
  if(!$this.hasClass('yy'))
    $('.yy').toggleClass("yy").toggleClass("xx");
  $this.toggleClass("yy").toggleClass("xx");
});​

但是，通常，您会使用 css 的“级联”属性来简化事情。例如，无需切换类，只需向所选元素添加一个附加类即可。然后组织您的 CSS，以便在这种更具体的情况下，您想要突出显示的显示属性被覆盖。例如，使用此 CSS:

.xx {
    border: 5px solid green;    
}

.xx.yy {
    border: 5px solid red;    
}

您只需添加和删除“yy”类，并保留“xx”类即可。