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>

jQuery-单击时更改颜色

1 个答案: