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中使用这个内容。结构必须保持不变。

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

- Gab

---

为什么不直接添加 span，{{link1：<span>一些文本</span>}} 然后隐藏，$("a.sliderImg span").hide(); - Turcia

我无法添加一个span，因为我需要将内容用于一些AJAX。结构必须保持不变。 - Gab

你需要能够切换文本吗？还是只是永久隐藏它？ - Sampson

Answer 1

我建议：

a.sliderImg {
    color: transparent;
}

你还可以使用user-select CSS属性来防止文本被选中：

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格式不正确，/不应该出现在起始标签中（这只适用于空元素的起始标签，如input或img）。

参考文献：

• user-select。

- David Thomas

Answer 2

您可以使用.text方法来删除文本：

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

Fiddle: http://jsfiddle.net/J5QME/

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

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

Fiddle: http://jsfiddle.net/J5QME/2/

- Sampson

Answer 3

您可以在 a 标签内的文本周围添加额外标记，例如 span，并隐藏该 span。some-text

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

- user1276919

---

我不能添加一个<span>标签，因为我需要在AJAX中使用这个内容。结构必须保持不变。 - Gab

Answer 4

你可以尝试使用以下代码来隐藏文本：

演示示例： http://jsfiddle.net/yw8w2/1/

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

- Oscar Jara