为什么不在 jQuery 中切换类？

Question

我创建了一个小草图来测试我的知识。我想通过点击 td 元素来更改 classes。

我添加了一个基本的 class，然后我用 toggleClass() 进行了更改。不幸的是不起作用。

$( function() {
    $('td').addClass("grey-cell");

    $('td').click( function() {
        if($(this).hasClass("grey-cell"))
            $(this).toggleClass("red-cell");
        if($(this).hasClass("red-cell"))
            $(this).toggleClass("blue-cell");
        if($(this).hasClass("blue-cell"))
            $(this).toggleClass("green-cell");
        if($(this).hasClass("green-cell"))
            $(this).toggleClass("grey-cell");
    });
});

code sketch

Answer 1

让我们顺理成章：

$(function() {
    $('td').addClass("grey-cell");

    $('td').click(function() {
        if ($(this).hasClass("grey-cell"))
            $(this).toggleClass("red-cell");
        if ($(this).hasClass("red-cell"))
            $(this).toggleClass("blue-cell");
        if ($(this).hasClass("blue-cell"))
            $(this).toggleClass("green-cell");
        if ($(this).hasClass("green-cell"))
            $(this).toggleClass("grey-cell");
    });
});

当您单击一个单元格时，它会显示 grey-cell，因此您打开 red-cell。然后，在下一行，您会看到它是否有 red-cell（它会），如果有，您打开 blue-cell。然后你对 blue/green 做同样的事情，然后 green/grey.

所以在第一次点击后，td 有 red-cell blue-cell green-cell 而没有 grey-cell。

我猜你是故意的

A) 使用 else 所以只有一条路径被遵循，并且

B) 关闭前一个class它有

例如：

$(function() {
  $('td').addClass("grey-cell");

  $('td').click(function() {
    var td = $(this);
    if (td.hasClass("grey-cell")) {
      td.toggleClass("grey-cell red-cell");
    } else if (td.hasClass("red-cell")) {
      td.toggleClass("red-cell blue-cell");
    } else if (td.hasClass("blue-cell")) {
      td.toggleClass("blue-cell green-cell");
    } else if (td.hasClass("green-cell")) {
      td.toggleClass("green-cell grey-cell");
    }
  });
});

请注意，当我们知道它有（比如）grey-cell 时，我们如何在 toggleClass 中包含 grey-cell，因此我们在添加 red-cell 时将其删除。等等。

$(function() {
  $('td').addClass("grey-cell");

  $('td').click(function() {
    var td = $(this);
    if (td.hasClass("grey-cell")) {
      td.toggleClass("grey-cell red-cell");
    } else if (td.hasClass("red-cell")) {
      td.toggleClass("red-cell blue-cell");
    } else if (td.hasClass("blue-cell")) {
      td.toggleClass("blue-cell green-cell");
    } else if (td.hasClass("green-cell")) {
      td.toggleClass("green-cell grey-cell");
    }
  });
});

.grey-cell {
  background-color: grey;
  color: white;
}
.red-cell {
  background-color: red;
  color: white;
}
.blue-cell {
  background-color: blue;
  color: white;
}
.green-cell {
  background-color: green;
  color: white;
}

<table>
  <tbody>
    <tr>
      <td>Click me</td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

不用复杂的东西也可以做到if else。按照您需要的顺序制作一个 class 的数组。然后点击 td 根据数组的顺序更改 class。如果您到达数组的最后一项，则返回到第一项。

$(function() {
    $('td').addClass("grey-cell");
    var classes = ['grey-cell', 'red-cell', 'blue-cell', 'green-cell'];
    var total = classes.length;

    $('td').click(function () {
        var cls = $(this).attr('class');

        //if you have other classes then take last class
        //var arr = $(this).attr('class').split(' ');
        //var cls = arr[arr.length];

        var index = classes.indexOf(cls);
        index = (index + 1) % total;

        $(this).removeClass(cls).addClass(classes[index]);
    });
});

为什么不在 jQuery 中切换类？

Why not toggle classes in jQuery?

jquery

addclass

toggleclass

为什么不在 jQuery 中切换 类？

Why not toggle classes in jQuery?

jquery

addclass

toggleclass

为什么不在 jQuery 中切换类？