jquery - JS/JQuery：如何以循环方式多次切换类？

Question

如何以循环的方式多次切换项目的类别？我尝试了以下1/3成功的各种组合。第一次切换点击有效（news->part），第二次点击无效（part->easy），第三次无效（easy->news）。提前谢谢。

HTML

<td class="news">Click on me!<td>
<td class="news">Click on me too!<td>

CSS

.news { border: 3px solid red ; }
.part { border: 3px solid orange ; }
.easy { border: 3px solid green ; }

查询：

$("td").click(function () {
  if (        $("td").hasClass('news')) {
    $(this).removeClass("news").addClass('part');   /* click 1: works*/
  } else if ( $("td").hasClass('part')) {
    $(this).removeClass('part'  ).addClass('easy'); /* click 2: doesn't*/
  } else {
    $(this).removeClass('easy'  ).addClass('news'); /* click 2: doesn't*/
  }
});

Answer 1

Javascript

$("td").click(function () {
  if ($(this).hasClass('news')) {
    $(this).removeClass("news").addClass('part');   /* click 1: works*/
  } else if ( $(this).hasClass('part')) {
    $(this).removeClass('part'  ).addClass('easy'); /* click 2: doesn't*/
  } else {
    $(this).removeClass('easy'  ).addClass('news'); /* click 2: doesn't*/
  }
});

示例：http: //jsfiddle.net/sRvcK/

Answer 2

在 if 块中，您应该使用thisas well 而不是$("td").hasClass('news')，如下所示

if ($(this).hasClass('news')) {
   //Do your thing...
}

Answer 3

$("td").click(function () {

  var $this = $(this);

  if ($this.hasClass('news')) {

    $this.removeClass('news').addClass('part');

  } else if ($this.hasClass('part')) {

    $this.removeClass('part').addClass('easy');

  } else {

    $this.removeClass('easy').addClass('news');

  }
});