javascript - 如何根据内容的大小写来应用类

Question

我正在尝试选择多个 <div>具有类 .choice 的元素然后检查内容是否都是大写或内容是否都是小写。根据它的内容是全小写还是大写，我想应用一个 CSS 类。

我一直在尝试使用 Jquery/Javascript 来执行此操作，但是我对这两种语言都很陌生。

我使用的 Jquery 是这样的:

$(".choice").text()
// and also
$(".choice").text().isUppercase().addClass()

但我很确定我不能以这种方式使用 JavaScript 和 Jquery。

Answer 1

要实现此目的，您可以向 addClass() 提供一个函数，该函数检查当前元素中文本的大小写，并根据找到的内容返回要添加的类。试试这个:

$(".choice").addClass(function() {
  var t = $(this).text();
  if (t.toUpperCase() === t) 
    return 'upper';
  else if (t.toLowerCase() === t)
    return 'lower'    
});

.upper { color: #C00; }
.lower { color: #0C0;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="choice">ALL UPPERCASE</div>
<div class="choice">Both Cases</div>
<div class="choice">all lowercase</div>

请注意，可以使用以下三元语句来缩短 if 条件。如果您更喜欢简洁而不是可读性，这是个人偏好:

return t.toUpperCase() === t ? 'upper' : t.toLowerCase() === t ? 'lower' : null;