我需要一个单元格有三种颜色:首先由脚本加载，第二点击单元格，第三点击一次。如果我再次点击，我就会得到第一种颜色
我写的是:
<head>
</head>
<body>
<table border='2' cellpadding='20' align='center'>
<tbody>
<tr>
<td class="switch">1</td>
<td class="switch">2</td>
<td class="switch">3</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type="text/javascript">
$('.switch').click(function() {
$(this).toggleClass('highlight');
$(this).click(function() {
$(this).toggleClass('highlight2');
})
$(this).click(function() {
$(this).toggleClass('switch');
})
})
</script>
<style>
.highlight {
background-color: #ffff00;
}
.highlight2 {
background-color: red;
}
</style>
</body>
我的问题是，前两次点击工作正常(颜色改变)，但第三次是无用的，第四次工作作为第三次应该(让颜色回到开始)。
我只需要三次点击。
我不确定我是否理解你的问题，但这里有一些事情可以开始:
$(document).ready(function () {
var i = 0;
$('.combi').on('click', function () {
i += 1;
if (i == 1) {
$(this).toggleClass('highlight');
} else if (i == 2) {
$(this).toggleClass('highlight2');
} else {
$(this).removeClass();
i = 0;
}
})
}).highlight {
background-color: #ffff00;
}
.highlight2 {
background-color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border='2' cellpadding='5' align='center'>
<tbody>
<tr>
<td class="combi">1</td>
</tr>
<tr>
<td class="combi">8</td>
</tr>
<tr>
<td class="combi">15</td>
</tr>
</tbody>
</table>