如何在不使用getElementById的情况下将文本或span的值传递给onClick函数

How do I pass the text, or value of a span to a function onClick, without using getElementById?

本文关键字：span 值传 函数 onClick 文本 情况下 getElementById      更新时间：2023-09-26

如何将span的值或文本内容传递给jQuery函数，同时执行onClick函数?

我尝试了以下几样东西，但没有成功:

<span onClick="sceSelect()">Next</span>

我试图传递值"下一步"，但还没有能够。我不能使用getElementByID，因为span内的内容是动态生成的，并且从一个数组中放置到html中，该数组将有多个不同的值作为单独的s放置到html中，但是我需要每个值激活一个函数并将其值传递给它onClick。

如果必须使用内联事件处理:

<span onclick="sceSelect((this.textContent || this.innerText))">Next</span>

顺便说一句，你不需要骆驼大小写(onClick) onclick属性。

当然，这假定您的函数期望传递一个参数，例如:

function sceSelect(elementText){
}
当然，您也可以在函数调用中传递节点本身(坦率地说，这更有意义)(正如bfaveretto所指出的，在其他地方)。

然而，我不相信有任何理由在jQuery中使用内联事件处理，使用:

$('span').click(function(){
    sceSelect(this);
    // or:
    sceSelect($(this));
    // or:
    sceSelect($(this).text());
});

对我来说更有意义(尽管您的用例可能与我想象的(或应该)完全不同)。

顺便说一句，如果你只关心避免getElementById()，避免内联事件处理的一种方法是使用: 
function sceSelect() {
    console.log(this.textContent || this.innerText);
}
var spans = document.getElementsByTagName('span');
for (var i = 0, len = spans.length; i < len; i++) {
    spans[i].onclick = sceSelect;
}

JS Fiddle demo.

在函数sceSelect()的范围内，this对象/节点是您(或用户)单击的span元素。

最简单的方法是传递一个对元素本身的引用:

<span onClick="sceSelect(this)">Next</span>

然后从函数中访问你需要的任何属性。

但是，应该尽可能避免使用内联事件处理程序。如果您使用JavaScript创建一个事件侦听器，触发该事件的元素将作为this在侦听器中可用: 
var span = document.getElementById('someSpan');
span.addEventListener('click', function(e) {
    // here, 'this' will be your span
    alert(this.textContent || this.innerText)
});
相关文章：