добавить ссылку «показать больше» к усеченному абзацу, только если встречено установленное количество символов
Я хочу добавить ссылку «показать больше» (если щелкнуть, чтобы раскрыть содержимое, которое было обрезано / скрыто) к моему абзацу, только если пройдено количество символов X.
Например, я установил минимум в 120 символов, а в абзаце всего 60 символов, поэтому мне не нужно добавлять ссылку «показать больше».
Как я могу решить это? Приведенный ниже код отлично работает, но применит «покажи больше» к любому моему абзацу, хотя он меньше, чем сумма X. Что мне делать?
https://jsfiddle.net/vm0uj7fc/1/
var charLimit = 122;
function truncate(el) {
var clone = el.children().first(),
originalContent = el.html(),
text = clone.text();
el.attr("data-originalContent", originalContent);
clone.text(text.substring(0, charLimit) + "...")
el.empty().append(clone);
}
function reveal(el) {
el.html(el.attr("data-originalContent"));
}
$("a").on("click", function (e) {
e.preventDefault();
var truncateElement = $(this).parent().prev().find(".truncate");
if ($(this).text() === "Read More") {
$(this).text("Read Less");
reveal(truncateElement);
} else {
$(this).text("Read More");
truncate(truncateElement);
}
});
$(".truncate").each(function () {
truncate($(this));
});
Подведем итог:
Мне нужно добавить «читать дальше» динамически с помощью (.append функция?)Проверьте символы и, если меньше, то максимальная сумма НЕ отображается большенеобязательно, если кто-то может придумать чистый Javascript, который был бы предпочтительным выбором, если нет, я согласен с некоторым рефакторингом кода, начиная с моего кода выше