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

Question

[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), а в переменную записывается текст из объекта.

Что нужно сделать, чтобы все работало правильно?

Answer 1

[Сергей Соколов]

ошибки:

1. .text() запишет только текст, без разметки HTML – иконка пропадёт
   
2. надо где-то сохранить исходный текст
   
3. функция срабатывает при каждом клике заново. Оказавшись с коротким текстом уже не сможет вернуться к длинному.
   

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

Comments

[gazes12]

Сергей Соколов, подскажите пожалуйста, почему вы записали название переменной в { } ? const { textContent } = el;

[Сергей Соколов]

gazes12, см. деструктурирующее присваивание

const obj = { a: 'AAA', b: 'BBB' };

const { a } = obj; // объявили константу a со значением свойства obj.a
console.log(a) // 'AAA'

const { b: xxx } = obj; // вытащить свойство b как константу xxx
console.log(xxx); // 'BBB'

[gazes12]

Сергей Соколов, Хочу сделать на jquery, ну появилась проблема:

const makeInteractive = el => {
  const { text } = el;
  console.log(text);
};

$('.recall__people-fio-name').each(function(){makeInteractive($(this))});

Текст не хочет выводится. Помогите пожалуйста.

[Сергей Соколов]

gazes12, ну так $(this) это не то же, что кликнутый элемент.
У него нет свойства .text, есть метод .text()

[gazes12]

Сергей Соколов, То есть, нужно сделать так?

const { text() } = el;
  console.log(text());

Так выдает ошибку: SyntaxError: Invalid destructuring assignment target

[Сергей Соколов]

gazes12, нет, во-первых переименуйте аргумент, чтобы не путаться:

const makeInteractive = $el => {
// аргумент теперь объект jQuery

во-вторых, да пишите обычно:
const text = $el.text();

[gazes12]

Сергей Соколов, Здравствуйте.

el.addEventListener('click', event => trigger(event.target));
  trigger(el);

Почему вы написали trigger(el); ?

el.addEventListener('click', event => trigger(event.target));

разве недостаточно? Помогите пожалуйста с этим вопросом.

[gazes12]

Сергей Соколов,

const TEXT = 'TEXT';

const text = $el.text();
$el.dataset[TEXT] = text;

Если что, это вырезок из кода.

Выдает ошибку: Uncaught TypeError: Cannot set properties of undefined (setting 'TEXT'). Помогите пожалуйста.

[Сергей Соколов]

gazes12, функция trigger() вызывается в двух местах: по событию клика, и без события, в процессе инициализации — чтобы изначально спрятать длинные тексты.

С ошибкой – та же причина, что и раньше. Работаете не с HTML элементом, а с объектом jQuery, у которого работа с data другая.

[gazes12]

Сергей Соколов, Спасибо)

[gazes12]

gazes12,

С ошибкой – та же причина, что и раньше. Работаете не с HTML элементом, а с объектом jQuery, у которого работа с data другая.

Я пишу $el[0] чтобы работать с HTML, это правильно?

[Сергей Соколов]

gazes12, научитесь самостоятельно разбираться. Выведите в консоль. Почитайте документацию. Погуглите.
Если не поможет, задайте новый вопрос.