javascript - 单击 li 时如何使用简单的 javascript 从嵌套跨度中获取文本

Question

我还不会 jQuery，所以请使用 javascript。我需要帮助调整我的 JS，以便它在单击时从 li 内的嵌套跨度获取文本。如果您单击文本，我现在可以使用它，但如果您单击整个 li 而没有获得其他嵌套元素(图像)，我希望它可以工作。

现在我正在使用以下 html 和 js:

HTML:

<ul><li><img><span onclick="myfunction(this)">TEXT</span></li></ul> 

<input id="iSupervisorUserName" name="OBKey_WF_Manger_Supervisor_1" type="text" />

JS:

function myfunction(span) {
    var textInsideLi = span.innerHTML;
    var field = document.getElementById("iSupervisorUserName");
    field.value = textInsideLi;

我希望在单击 li 时将来自 SPAN 的文本写入输入，而不仅仅是跨度。我知道我应该将 onClick 调用从 span 移到 li，但是我该如何调整 JS 以便它只获取 span 内的文本而不是 IMG？

Answer 1

给你

html

<ul><li onclick="myfunction(this)"><img><span>TEXT</span></li></ul>

js

function myfunction(li){
 document.getElementById("iSupervisorUserName").value=
 li.getElementsByTagName('span')[0].textContent;
}

或

function myfunction(li){
 document.getElementById("iSupervisorUserName").value=
 li.childNodes[1].textContent;
}

无论如何，我会在 ul 或 li 中添加一个事件监听器。如果您想稍后更新代码，内联 js 是一团糟。如果您添加 onclick="myfunction(this )" 在每一行上。