如何根据内容是大写还是小写来应用类

【问题标题】：How to apply a class based on the content being upper or lower case如何根据内容是大写还是小写来应用类
【发布时间】：2020-01-29 11:22:49
【问题描述】：

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

我一直在尝试使用 Jquery/Javascript 来做到这一点，但是我对这两种语言都很陌生。

我使用的 Jquery 是这样的：

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

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

【问题讨论】：

向我们展示您的尝试以及结果（可能在 jsfiddle 中）。
@Sfili_81 有一个例子说明 OP 在问题中尝试了什么

标签： javascript jquery html css

【解决方案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;

【讨论】：