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

我正在尝试使用类<div>选择多个.choice元素，然后检查内容是否全部为大写字母或内容是否全部为小写字母。基于其内容全部为小写还是大写，我想应用一个CSS类。

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

我使用的Jquery遵循以下原则：

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

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

最佳答案

为此，您可以为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;

关于javascript - 如何根据内容的大小写来应用类(class)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59965997/