Как скрыть весь текст, размер которого меньше определенного пикселя, и вернуть его позже, используя Javascript?

Question

Я работаю над проектом, который в некоторых случаях требует скрытия всего небольшого текста (например, менее 12 пикселей) и при некоторых других событиях возвращает его обратно. Это не веб-сайт, но что-то происходит в браузере. У меня нет контроля над содержимым страницы (разработанным сторонними разработчиками), но я могу изменить его. Я знаю, что могу циклически проходить по всем элементам тегов, проверять размеры шрифтов и скрывать их, если они меньше 12px, но это не только неэффективно, но и текст можно изменить, чтобы он снова отображался, скажем, после вызова ajax, что «запрещено». Другим решением было бы запускать этот цикл каждые пару секунд, но это дорогостоящий процесс.

Другая задача - показать небольшой текст на каком-то другом событии, что не так уж сложно реализовать, просто используя простой пользовательский класс.

Answer 1

Вы можете запустить код при загрузке страницы, а затем, когда любой вызов AJAX завершится с использованием глобальных обработчиков событий AJAX jQuery: http://api.jquery.com/category/ajax/global-ajax-event-handlers/

$(function () {
    function findSmallText($root, state) {
        if (typeof $root == 'undefined') {
            $root = $(document);
        }
        if (typeof state == 'undefined') {
            state = 'none';
        }
        $.each($root.find('p, div, span, font, button, a'), function () {
            if ($(this).css('font-size').replace(/(px|pt|em)/gi, '') <= 12) {
                $(this).css('display', state);
            }
        });
    }

    //run the function when the DOM is ready
    findSmallText();

    //also run the function when any AJAX request returns successfully
    $(document).ajaxSuccess(findSmallText);
});

Вы можете передать функции findSmallText два аргумента:

1. $root: (объект jQuery) корневой элемент, с которого начинается поиск небольшого текста, максимально ограничьте его, чтобы повысить производительность (чтобы не нужно было сканировать ненужные элементы).
2. state: (строка) свойство display для добавления к элементам с мелким текстом, вы можете использовать block для отображения элементов.

Answer 2

если структура HTML не изменяется (дополнительные контейнеры не добавляются через AJAX), просто проанализируйте страницу onLoad (вроде как то, что предлагает Jasper), но вместо того, чтобы повторно выполнять анализ после каждого вызова AJAX, вы добавляете новый класс - давайте назовем его.HideMeInCertainCases для удовольствия.Таким образом, вы можете скрыть / показать все, что вы хотите, с помощью простого селектора, когда вы хотите.Поэтому вместо этой строки: $(this).css('display', state); используйте $(this).addClass('HideMeInCertainCases');

Когда происходит событие, о котором вы говорили, вы можете переключать состояние отображения с помощью этого селектора $("HideMeInCertainCases").toggleClass("hideMe").Непосредственное изменение атрибута display может нарушить ваш макет, поскольку узлы, содержащие текст, могут иметь разные дисплеи для начала (block, inline, inline-block ...).Конечно, .hideMe { display:none; } должно быть где-то в вашей таблице стилей.Если вы хотите, чтобы макет оставался прежним и скрывал только содержимое, используйте visibility вместо display