如何在点击时更改课程

我有结构：

 
 
 one 
 
 
 
 Two 
 
 
 
 Three 
 
  

CSS：

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

现在点击它的类应该改变。 即如果它是’xx’那么它应该转’yy’反之亦然，其余的应该保持不变，我尝试了类似的东西（参考： 如何在jquery中更改标签的类 ）

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

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

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

编辑更明确的要求（根据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’类。

Answer 2

请参阅下面的更新

如果结构永远不会改变，你可以这样做：

 $("a.xx, a.yy").click(function() { var $this = $(this); if ($this.hasClass("xx")) { $this.removeClass("xx").addClass("yy"); } else { $this.removeClass("yy").addClass("xx"); } }); 

像这样： http ： //jsbin.com/ecidi3

或者你可以缩短一点（ 例子 ），但我不想牺牲上面的清晰度：

 $("a.xx, a.yy").click(function() { var $this = $(this); var classes = $this.hasClass("xx") ? ["xx", "yy"] : ["yy", "xx"]; $this.removeClass(classes[0]).addClass(classes[1]); }); 

如果您的结构可能发生变化，您可能会考虑live ：

 $("a.xx, a.yy").live("click", function() { var $this = $(this); if ($this.hasClass("xx")) { $this.removeClass("xx").addClass("yy"); } else { $this.removeClass("yy").addClass("xx"); } }); 

像这样： http ： //jsbin.com/ecidi3/2这样做的好处是，即使添加更多链接，它也会自动继续工作。 当然，如果你想要它更短一点，你可以改变身体，如上图所示（ 例子 ）。

---

从您的更新来看，您似乎不仅想要切换一个链接，而是将其排除在外。 所以：

 $("a.xx, a.yy").click(function() { var $this, c; $this = $(this); c = $this.hasClass("xx") ? {us: "yy", them: "xx" } : {us: "xx", them: "yy" }; $("a." + c.us).removeClass(c.us).addClass(c.them); $this.removeClass(c.them).addClass(c.us); }); 

实例http://jsbin.com/ecidi3/5

当然，使用live你只需改变连接方式：

 $("a.xx, a.yy").live("click", function() { // ^-- change here 

实例： http ： //jsbin.com/ecidi3/6