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'类。

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

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

$("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这样做的好处是，即使添加更多链接，它也会自动继续工作。当然，如果您希望它更短一点，您可以如上所示更改身体（example）。

从您的更新中，您似乎不仅想要切换一个链接，而且还要将其排除。所以：

$("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

如何在点击时更改课程

2 个答案: