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>

每次点击更改班级

1 个答案: