Jquery在p标签中计数字符并添加类

Question

我有一个jquery代码，它从输入文件中获取数据并将其显示在屏幕上。

现在我想让jquery计数字符(和空白)，并添加一个类，但取决于字符的数量:

1. 如果1-3个字符= font size 36px

这是我当前的代码:

$(document).ready(function(){
// Get value on button click and show text
$("#myBtn").click(function(){
var str = $("#name").val();
$('#one').html(str);
});
});

Answer 1

像这样

$(function() {
// Get value on button click and show text
$("#myBtn").click(function() {
const str = $("#name").val();
let size = "one"; // default
if (str.length < 4) size = "one"
else if (str.length < 8) size = "four"
else if (str.length < 13) size = "eight"
$('#one')
.html(str)
.removeClass()
.addClass(size)
});
});

.one {
font-size: 36px
}
.four {
font-size: 33px
}
.eight {
font-size: 30px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button type="button" id="myBtn">Click</button>
<textarea id="name"></textarea>
<span id="one"></span>