jQuery 仅在

Question

我有一个

文本标题块，其中设置了背景颜色和文本内容。我想隐藏文本内容而不是背景颜色。当我在

上使用 hide() 时，它会隐藏整个块以及所有内容。我需要带有颜色的块，然后我希望文本稍后显示。

我正在考虑将其包装在 div 中并使用 div 的背景颜色，但这会导致额外的代码。

是否可以仅控制

内的文本内容而不是整个框？

Answer 1

简短的回答是否定的。您不能仅“隐藏”文本。

话虽这么说，您可以通过几种方式模拟它被隐藏：

1)您可以删除文本，将其存储在本地，然后在取消隐藏时重置它。

var txt;
function hide() {
  txt = $('h2').text();
  $('h2').text('');
}
function show() {
  $('h2').text(txt);
}

但是，这将使您必须在

元素上具有静态宽度/高度，否则当您更改文本时它会更改大小。

2) 使文本颜色与背景颜色匹配也可以模拟“隐藏”文本。

3) 或者可能是最好的选择，只需将其包装在带有背景颜色的 div 中，然后就到此为止了。

Answer 2

为什么不像这样将文本包装在标题内，然后隐藏内部元素：

<h2><span>Your text here</span> </h2>

然后在 jQuery 中，使用以下选择器：

$('h2 > span');

编辑：@TJ Crowder 的建议确实是一个很好的建议，您可以随时放置  < /code> 在换行文本之后，使

始终保持其高度。

Answer 3

您可以将 text-indent 设置为 -9999px 或类似的值。

Answer 4

您可以将 h2 文本颜色更改为与背景颜色相同，而不是使用 hide()，这将创建隐藏效果：

$('h2').css('color','your-background-color');

Answer 5

您可以这样做

$('h2').contents().filter(function() {
    return this.nodeType === 3
}).wrap('<b />');

，这将使用 标记包裹文本。
在您的 css 中将 标记设置为 display:none;。这将隐藏文本而不是 h2 标记。

检查工作示例 http://jsfiddle.net/BE8N9/1/

Answer 6

您可以将 h1 的文本替换为  。这将保留元素占用的垂直空间，但不显示任何文本。 （不要用空白字符串替换其文本，该元素实际上会消失。）

表示为 jQuery 插件（尽管这可能有点矫枉过正 :-) ）：

(function($) {
    $.fn.hideText = function() {
        this.html(function() {
            var $this = $(this);
            $this.attr('data-oldtext', $this.html());
            return ' ';
        });
        return this;
    };
    $.fn.showText = function() {
        this.html(function() {
            var $this = $(this);
            return $this.attr('data-oldtext') || $this.html();
        });
        return this;
    };
})(jQuery);

Live copy

也就是说，我会退后一步，考虑一下这是否真的是正确的做法。很可能是这样，但似乎有点奇怪。

Answer 7

让文字与背景颜色相同怎么样？