javascript - 如何从选择中删除部分文本？

Question

我正在尝试使按钮触发仅选择未嵌套文本的功能。例如，在以下代码中：

<a class="button">Hey<span>123</span></a>   <!-- alerts "Hey" -->
<a class="button">Hi<span>123</span></a>    <!-- alerts "Hi" -->
<a class="button">Hello<span>123</span></a> <!-- alerts "Hello" -->

每个链接都会调用一个函数来提醒不在<span>. 例如，第一个链接将触发一个提醒“Hey”、第二个“Hi”和第三个“Hello”的功能（如上面的评论所示）。

自然，我有以下代码，但我不知道如何审查<span>s 中的文本（或可能在外部锚元素中的其他元素）。

$("div.sideBox").on("click", ".button", Handler);

function Handler(event) {
    alert($(this).html());
}

Answer 1

如果您将类放置.button在锚标签上，这应该可以工作

<a class="button">Hey<span>123</span></a>
<a class="button">Hi<span>123</span></a> 
<a class="button">Hello<span>123</span></a>

加上使用javascript DOM元素属性firstChild来获取文本节点并nodeValue获取它的值，忽略子span元素的文本。

function Handler(event) {
    alert(this.firstChild.nodeValue);
}

演示

Answer 2

我将从您提供的 HTML 开始。首先我会删除<grey>标签，因为那不是有效的 HTML 标签。我会<span>在您想要输出的值周围放置标签，这将使它们在我们的 JavaScript 中易于访问。

HTML：

<a class="stag"><span>Hey</span>123></a>
<a class="stag"><span>Hi</span>123</a> 
<a class="stag"><span>Hello</span>123</a>

然后使用此 JavaScript 返回这些值（在您的示例中使用 JQuery）：

$("a.stag").click(function() {
    alert($(this).first("span").text());
});