每次点击更改课程

Question

当我们点击跨度referent-R时，它有checked类。这有效。然而，当我们在同一个span上点击另一次时，我想删除checked类。它应该是单选按钮/复选框行为。

$('.referent-R').click(function() {
  if ($(this).is(':checked')) {
    $(this).removeClass('checked');
    $(this).addClass('unchecked');
  } else {
    $(this).removeClass('unchecked');
    $(this).addClass('checked');
  }
});

.referent-R {
  font-family: Roboto, sans-serif;
  content: 'R';
  font-weight: bolder;
  font-size: 25px;
}

.referent-R.checked {
  color: rgb(76, 10, 89);
}

.referent-R.unchecked {
  color: rgb(200, 200, 200);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="referent-R" title="référent"></span>

非常感谢 ！！

Answer 1

:checked选择器仅适用于单选按钮和复选框。

在这种情况下，您可以通过在默认情况下在元素上设置checked或unchecked类，然后只需在单击时切换这些类，就可以使您需要的行为起作用。试试这个：

$('.referent-R').click(function() {
  $(this).toggleClass('checked unchecked');
});

.referent-R {
  font-family: Roboto, sans-serif;
  content: 'R';
  font-weight: bolder;
  font-size: 25px;
}

.referent-R.checked {
  color: rgb(76, 10, 89);
}

.referent-R.unchecked {
  color: rgb(200, 200, 200);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="referent-R checked" title="référent">Foo</span>