如何隐藏所有小于某些像素的文本，并在以后使用Javascript将它们带回？

Question

我正在做一个项目，在某些情况下，该项目需要隐藏所有小文本（例如，小于12px），并在其他情况下，将它们放回原处。 这不是一个网站，但在webkit浏览出事。 我无法控制页面上的内容（由第三方开发人员开发），但是可以修改它。 我知道我可以遍历所有标记元素并检查字体大小，如果小于12px，则将它们隐藏起来，但这不仅效率低下，而且可以更改文本以再次显示，例如在ajax调用后说，“被禁止”。 其他解决方案是每隔几秒钟运行一次该循环，但这是一个昂贵的过程。

其他任务是在其他事件上显示小文本，仅使用简单的自定义类就不太容易实现。

Answer 1

您可以在页面加载时运行代码，然后在所有AJAX调用完成时使用jQuery的全局AJAX事件处理程序运行： 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")切换显示状态。 直接更改显示属性可能会破坏您的布局，因为包含文本的节点可能以不同的显示开头（块，行内，行内...）。 当然， .hideMe { display:none; } .hideMe { display:none; }应该放在样式表中。 如果您希望布局保持不变并且仅隐藏内容，请使用visibility而不是display