javascript - Jquery - 单击时更改颜色

Question

当我单击时，我会放置高亮，但我希望当我再次单击时，高亮消失，或者当我单击一个按钮时，他会删除最后一个突出显示。

$('div').each(function() {
  var $this = $(this);
  $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});

$('div span').click(function() {
  $(this).css('background-color', '#ffff66');
});

span {
  font-size: 15pt;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<div>
  <span>This text is a test text</span>
</div>

当我再次单击他删除突出显示的单词时，如何放置该功能？

感谢您的帮助。

Answer 1

您可以创建一个类并使用 toggleClass 切换它。 .

$('div').each(function() {
  var $this = $(this);
  $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});

$('div span').click(function() {
  $(this).toggleClass('highlightSpan');
});

span {
  font-size: 15pt;
}

.highlightSpan {
  background-color: #ffff66;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<div>
  <span>This text is a test text</span>
</div>