I need a cell to have three colors : first loaded by the script, second ny clicking on the cell and third by clicking on one more time. And if I click again I get the first color back.
I wrote this :
<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>
You can see how it works : jsfiddle
My problem is that the first two clicks work fine (the color change) but the third is useless and the fourth work as the third should (get the color back to the beginning).
I need to have only three clicks.
question from:
https://stackoverflow.com/questions/65945358/jquery-onclick-toggleclass-three-clicks-required-instead-of-two 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
