jQuery 如何在点击时更改课程

how to change classes on click

提问by Wondering

I have structure:

我有结构：

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

CSS：

.xx {
    border: 5px solid green;    
}

.yy {
    border: 5px solid red;    
}

now on click of <a>it's class should get changed. i.e. if it's 'xx' then it should turn 'yy' and vice-versa, and rest of the <a>should remain as it is, I tried something like (ref:how to change class of <a> tags in jquery)

现在点击<a>它的类应该得到改变。即如果它是 'xx' 那么它应该变成 'yy' 反之亦然，其余的<a>应该保持原样，我尝试了类似的东西（参考：如何在 jquery 中更改 <a> 标签的类）

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

but it didnt work that way, I tried to tweak the code, but it's not working. Can somebody help.

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

EDIT: May b my question was not clear enough: if I click on 2nd <a>/ any other <a>then it should turn red and rest of the tag should be green.i.e. if the <a>is having red color, then it should turn green and and rest of the should be in red, and vice-versa .

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

EDIT for more clear requirement (based on replies from sje397 ): say I am clicking on a having class xx/yy and i.e. I click on it again it should change i.e. if xx then it should go back to yy, if u again click on it, it should go back to xx. –

编辑更明确的要求（基于 sje397 的回复）：说我点击了一个有类 xx/yy 并且我再次点击它应该改变即如果 xx 那么它应该回到 yy，如果你再次点击它，它应该回到xx。——

回答by sje397

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

EDIT(due to author's comment)

编辑（由于作者的评论）

If you want to have only one highlighted tag (i.e. having the class 'yy') and all others having the class 'xx', you can do:

如果您只想有一个突出显示的标签（即具有“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");
});?

Usually, however, you would use the 'cascading' property of css to simplify things. For example, rather than switching classes, just add an additional class to the selected element. Then organise your CSS so that in this more specific case, the display properties which you want for the highlight override. For example, with this CSS:

但是，通常您会使用 css 的 'cascading' 属性来简化事情。例如，与其切换类，不如向所选元素添加一个额外的类。然后组织您的 CSS，以便在这种更具体的情况下，您想要用于高亮覆盖的显示属性。例如，使用此 CSS：

.xx {
    border: 5px solid green;    
}

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

You just need to add and remove the 'yy' class and leave the 'xx' class alone.

您只需要添加和删除 'yy' 类并单独留下 'xx' 类。

回答by T.J. Crowder

See update below

请参阅下面的更新

If the structure will never change, you can do this:

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

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

Like this: http://jsbin.com/ecidi3

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

Or you can make that a bit shorter (example), but I didn't want to sacrifice clarity above:

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

$("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]);
});

If your structure may change, you might consider live:

如果您的结构可能会发生变化，您可以考虑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");
    }
});

Like this: http://jsbin.com/ecidi3/2This has the advantage that it will automatically keep working even if you add more links. And of course, you can change the body as shown above (example) if you want it a bit shorter.

像这样：http: //jsbin.com/ecidi3/2这有一个优点，即使您添加更多链接，它也会自动保持工作。当然，如果您希望它更短一点，您可以更改如上所示的主体（示例）。

---

---

From your update, it seems you don't just want to toggle that one link, but have it be exclusive. So:

从您的更新来看，您似乎不只是想切换那个链接，而是让它独占。所以：

$("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);
});

Live example http://jsbin.com/ecidi3/5

现场示例http://jsbin.com/ecidi3/5

And of course, using liveyou just change how you hook it up:

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

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

Live example: http://jsbin.com/ecidi3/6

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