时间戳

首页 > 解决方案 > jquery计算p标签中的字符并添加类

jquery - jquery计算p标签中的字符并添加类

问题描述

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

现在我希望 jquery 计算字符（和空白）并为其添加一个类，但取决于字符数：

  1. 如果 1-3 个字符 = 字体大小 36px
  2. 如果 4-7 个字符 = 字体大小 33px
  3. 如果 8-12 个字符 = 字体大小 30px

这是我当前的代码：

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

标签： jquery

解决方案

像这样

$(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>

推荐阅读