Question

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

我添加了一个基本类，之后我用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。然后用蓝色/绿色做同样的事，然后用green/grey。

首次点击后，td有red-cell blue-cell green-cell且没有grey-cell。

我的猜测是你的意思

A）使用else，因此只遵循一条路径，

B）关闭上一课

E.g：

$(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时，我们会在grey-cell中添加toggleClass，因此我们会在添加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的情况下执行此操作。按所需顺序创建一个类数组。然后根据数组的顺序单击td更改类。如果到达阵列的最后一项，则返回第一项。

$(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中切换类？

2 个答案: