Question

我想在JavaScript中获取span id，代码总是返回M26，但我想在不同的点击M26或M27上使用不同的值：

function clickHandler() {
    var xid= document.getElementsByTagName("span");
    var xsp= xid[0].id;   
    alert(xsp);     
} 
}

<html>
    <BODY LANGUAGE = "javascript" onClick = "clickHandler();">
        <a href="javascript:void(0)"><u><b><span id=M26>2011-  
        2012</span></b></u></a>   
        <div id=c26 STYLE="display:none">
            <a href="javascript:void(0)"><u><b><span id=M27>2012-  
            2013</span></b></u></a>   
        <div id=c27 STYLE="display:none"> 
    </body>
</html>

Answer 1

您遇到的问题是var xid= document.getElementsByTagName("span");无论您在何处点击，都会获得页面上的所有范围。

要解决此问题，您应该只传递对函数中单击对象的引用。例如：

<span id=M26 onclick="clickHandler(this);" >2011-2012</span>

然后在你的javascript代码中：

function clickHandler(object) {
    alert(object.id);
}

然而，最好在javascript中绑定事件而不是在html标记中内联。

这个article描述了将事件绑定到元素的不同方式。

Answer 2

有几种方法可以获取刚刚点击的元素的ID：

将对this的引用传递给处理程序：

onclick="handlerFunc(this);">

或者，更好的是，将事件对象传递给处理程序，这也允许您操纵事件的行为：

onclick='handlerFunc(event);'>
//in JS:
function handlerFunc(e)
{
    e = e || window.event;
    var element = e.target || e.srcElement;
    element.id;//<-- the target/source of the event (ie the element that was clicked)
    if (e.preventDefault)
    {//a couple of methods to manipulate the event
        e.preventDefault();
        e.stopPropagation();
    }
    e.returnValue = false;
    e.cancelBubble = true;
}

Answer 3

您可以使用getAttribute（）函数...

function clickHandler() {
var xid= document.getElementsByTagName("span");
var xsp= xid[0].getAttribute('id');   
alert(xsp);     
} 


<html>
<body LANGUAGE = "javascript" onload = "clickHandler();">
    <a href="javascript:void(0)"><u><b><span id=M26>2011-  
    2012</span></b></u></a>   
    <div id=c26 STYLE="display:none">
        <a href="javascript:void(0)"><u><b><span id=M27>2012-  
        2013</span></b></u></a>   
    <div id=c27 STYLE="display:none"> 
</body>
</html>

See working Demo

在JavaScript中获取span的id。

3 个答案: