gazes12
@gazes12

Как корректно реализовать систему сокращения и показа длинного текста?

$(document).on('click', '.recall__people-fio-name', function(){
    let amount = 15;

    let all = $(this).text() + `<i class="fa-solid fa-turn-up recall__people-fio-arrow"></i>`;
    let shortened = $(this).text().substring(0, amount)+'<i class="fa-solid fa-turn-down recall__people-fio-arrow"></i>';

    if($(this).text().length > amount){
        $(this).html(shortened);
    }else{
        $(this).html(all);
    }
});

При первом клике все работает правильно, в переменную all записывается полная длина текста, ну после второго клика в переменную all записывается укороченная форма текста, потому что текст объекта был заменен на укороченную форму (shortened), а в переменную записывается текст из объекта.

Что нужно сделать, чтобы все работало правильно?
  • Вопрос задан
  • 107 просмотров
Пригласить эксперта
Ответы на вопрос 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
ошибки:
  1. .text() запишет только текст, без разметки HTML – иконка пропадёт
  2. надо где-то сохранить исходный текст
  3. функция срабатывает при каждом клике заново. Оказавшись с коротким текстом уже не сможет вернуться к длинному.


Вот вариант на чистом JS без jQuery. Перебираем все элементы с классом. Смотрим длину текста. Если короче – ничего не делаем. Иначе подготавливаем: в data-свойствах сохраняем исходный текст, и текущее состояние (открыт/закрыт). По клику меняем состояние и отображаем соответственно полный или сокращённый текст.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы