时间戳

首页 > 解决方案 > 每次点击更改班级

jquery - 每次点击更改班级

问题描述

当我们单击跨度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>

非常感谢 ！！

标签： jqueryclick

解决方案

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

checked在这种情况下，您可以通过默认设置元素上的or类来使您需要的行为起作用，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>

推荐阅读