jQuery 仅在 <h2> 块中隐藏文本而不是背景答案

【问题标题】：jQuery hiding text only in <h2> block not backgroundjQuery 仅在 <h2> 块中隐藏文本而不是背景
【发布时间】：2011-04-28 19:45:30
【问题描述】：

我有一个<h2> 文本标题栏，带有设置的背景颜色和文本内容。我想隐藏文本内容而不是背景颜色。当我在<h2> 上使用 hide() 时，它会将整个块隐藏起来。我需要带有颜色的块，然后我希望文本稍后出现。

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

是否可以仅控制 <h2> 内的文本内容而不是整个框？

【问题讨论】：

标签： jquery text show-hide

【解决方案1】：

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

表示为一个 jQuery 插件（虽然这可能有点矫枉过正:-)）：

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

Live copy

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

【讨论】：

【解决方案2】：

如何让文本与背景颜色相同？

【讨论】：

聪明的主意！真正开箱即用

【解决方案3】：

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

话虽如此，您可以通过几种方式模拟它被隐藏：

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

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

但是，这将使您必须在<h2>元素上具有静态宽度/高度，否则当您更改文本时它会改变大小。

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

3) 或者可能是最好的选择，只需将其包装在具有背景颜色的 div 中，然后就可以结束了。

【讨论】：

【解决方案4】：

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

<h2><span>Your text here</span>&nbsp;</h2>

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

$('h2 > span');

编辑：@T.J. Crowder 的建议确实不错，你总是可以在你的换行后加一个&nbsp;，让<h2> 一直保持高度。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

你可以的

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

这将使用<b> 标记包装文本。在您的 CSS 中，将 <b> 标签设置为 display:none;。这将隐藏文本而不是 h2 标记。

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

【讨论】：