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

Question

在执行onClick函数时,如何将span的值或文本内容传递给jQuery函数？

我尝试过以下几件事,但没有运气:

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

我试图传递值"下一步",但未能通过.我不能使用getElementByID,因为span中的内容是动态生成的,并且是从一个数组放入html,这个数组将多个不同的值作为sepparate放入html中,但我需要每个都激活一个函数并传递它对onClick的价值.

Answer 1

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

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

顺便说一下,你不需要camel-case(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小提琴演示.

在该函数的范围sceSelect()的this对象/节点是span在其上(或用户)点击的元素.