4

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

我尝试了一些类似以下的方法，但没有运气：

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

我正在尝试传递值“Next”，但无法传递。我不能使用 getElementByID，因为跨度内的内容是动态生成的，并且从一个数组中放入 html 中，该数组中将有多个不同的值作为单独的放入 html 中，但我需要每个都激活一个函数并传递它对它的价值 onClick。

4

2 回答 2

10

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

<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 小提琴演示。

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

于 2013-04-03T20:49:23.427 回答
2

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

<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)
});
于 2013-04-03T20:49:59.203 回答