Блог

Главная - Вопросы по программированию - Jquery count caracter в теге p и добавьте класс

Jquery count caracter в теге p и добавьте класс

#jquery

Вопрос:

У меня есть код jquery, который берет данные из входного файла и отображает их на экране.

Теперь я хочу, чтобы jquery подсчитал символы (и пустые) и добавил к ним класс, но в зависимости от количества символов:

  1. если 1-3 символа = размер шрифта 36 пикселей
  2. если 4-7 символов = размер шрифта 33 пикселей
  3. если 8-12 символов = размер шрифта 30 пикселей

Это мой текущий код:

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

Ответ №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>

Комментарии:

1. Это оно. Большое спасибо. Это отлично работает

Метки: