jquery - jquery隐藏标签中的文本内容，而不是标签本身

Question

我有一个使用这种 html 语法的滑块：

<div id="theatre">
    <a class="sliderImg" href="01.jpg" />some-text</a>
    <a class="sliderImg" href="02.jpg" />another-description</a>
    <a class="sliderImg" href="03.jpg" />whatever</a>
    <a class="sliderImg" href="04.jpg" />whatever</a>
</div>

我需要做的是隐藏 a 标签的文本而不是 a 标签本身。

我得到了这个，但不起作用。

var imgCaptions = $("#theatre a.sliderImg").html();
$(imgCaptions).hide();

我无法添加跨度，因为我将内容用于某些 AJAX。结构必须保留。

非常感谢您的帮助。圣诞快乐！

Answer 1

我建议：

a.sliderImg {
    color: transparent;
}

您还可以使用user-selectCSS 属性来防止选择文本：

a.sliderImg {
    color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

或者，可能，使用unselectable元素本身的属性：

<a unselectable="on" class="sliderImg" href="04.jpg">whatever</a>

顺便说一句，您的 HTML 格式不正确，不应/在开始标记中（仅在 void 元素的开始标记中，例如or ）。inputimg

参考：

• user-select.

Answer 2

您可以使用以下.text方法简单地删除文本：

$(".sliderImg").text('');

小提琴：http: //jsfiddle.net/J5QME/

如果您需要存储文本以供以后使用，请将其设置为父锚点上的数据属性：

$(".sliderImg").text(function(i,v){
    return $(this).data('originalText', v), '';
});

小提琴：http: //jsfiddle.net/J5QME/2/

Answer 3

您可以放置​​额外的标签 ex。跨越 a 内的文本并隐藏跨度 some-text

$('#teathre span').hide();

Answer 4

你可以试试这个来隐藏文本：

现场演示：http: //jsfiddle.net/yw8w2/1/

$('#theatre a.sliderImg').map(function(){ $(this).text(''); });