javascript - 获取链接点击时标签元素的文本

Question

我有一个无序列表，在每个 <li> 下元素我有一个 <label>以及获取 <label> 文本的链接。

例如，如果我单击第一个“复制文本”链接，我想要获取“label1”，而对于第二个链接，我想要“label2”。

我想出了下面的代码，但它不起作用。谁能帮我解决这个问题。

HTML 代码:

<ul>
    <li>
        <label>label1</label>
        <a onclick="copyText()">Copy Text</a>
    </li>
    <li>
        <label>label2</label>
        <a onclick="copyText()">Copy Text</a>
    </li>
</ul>

JS 代码:

function copyText() {
    alert($(this).closest('li').children('label').text());
}

Answer 1

您需要传递元素的上下文，并将Text更改为.text()。

onclick="copyText(this)"

function copyText(el) {
    alert($(el).closest('li').children('label').text());
}

Example Here

<小时/>

您可以避免使用 jQuery 并直接获取元素的文本:

function copyText(el) {
    alert(el.previousSibling.textContent);
}

<小时/>

我建议使用不显眼的 JavaScript 并添加事件监听器:

$('li a').on('click', function () {
    alert($(this).closest('li').find('label').text());
});

Example Here