每次点击更改 class

Question

当我们点击跨度 referent-R 时，它有 checked class。这行得通。但是，当我们再次单击同一个 span 时，我想删除 checked class。它应该无线电 button/checkbox 行为。

$('.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 class 然后简单地切换这些 class 来使您需要的行为起作用点击。试试这个：

$('.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>

每次点击更改 class

Change class on each click

jquery

click