Question

我已将一个函数挂钩到多个控件的同一事件：

element.onchange = SetSelected;

在SetSelected我需要知道哪个元素叫我。我犯了一个错误，试图做到以下几点：

element.onchange = SetSelected(element.id);

当然会调用不是我想要的功能。

我想也许this关键字可以提供我想要的但是它没有（在SetSelected函数中）。

var element = this;

我没有使用jquery，并且不想为这样一个简单的任务添加依赖项。

对于那些在这里提出要求的人来说就是完整的例子：

var imageNumber = 12;
var elementId = "cphContent_rdoSelected";

window.onload = function () {
    for (var i = 1; i <= imageNumber; i++) {
        var element = document.getElementById(elementId + i.toString());

        //select the first element by default
        if (i === 1) {
            SetSelected(element.id);
        }
        element.onchange = SetSelected;
    }
};

function SetSelected() {
    for (var i = 1; i <= imageNumber; i++) {
        var radioButton = this;//document.getElementById(elementId + i.toString());

        var lbl = document.getElementById("lbl" + i.toString());

        if ( id === radioButton.id) {
            if (!radioButton.hasAttribute("checked")) {
                radioButton.setAttribute("checked","");
                lbl.style.display = "block";
            }
        }
        else {
            if (radioButton.hasAttribute("checked")) {
                radioButton.removeAttribute("checked");
            }
            lbl.style.display = "none";

        }
    }
};

Answer 1

如果您执行this，则使用element.onchange = SetSelected;将有效。但是，您的问题似乎与

有关

if (i === 1) {
    SetSelected(element.id);
}

这不起作用，因为this不会引用该元素，它会引用window。您必须通过this或.call明确设置.apply：

if (i === 1) {
    SetSelected.call(element);
}

了解this的来源：

Answer 2

尝试使用

element.onchange = function() { SetSelected(element.id); };

Answer 3

您可以从传递给onchange的事件参数中访问它所在的元素。

Event Object

event.target || event.srcElement

那应该得到被改变的元素。

Answer 4

我想你可以试试这个...... 但是，它完全重写了你拥有的东西。

var elementId = "cphContent_rdoSelected";
var elements;

function Window_OnLoad( event ) {
    elements = document.querySelectorAll( "input[id^='" + elementId + "']" );

    elements[0].setAttribute( "checked", "" );
    document.getElementbyId( elements[0].id.replace( elementId, "lbl" ) ).style.display = "block";

    for( var i = 0, len = elements.length; len > i; ++i ) {
        elements[0].addEventListener( "change", Radio_OnChange, false );
    }
}

function Radio_OnChange( event ) {
    var element = ( event.target )? event.target: event.srcElement;
    for( var i = 0, len = elements.length; len > i; ++i ) {
        elements[i].removeAttribute( "checked" );
        document.getElementbyId( elements[i].id.replace( elementId, "lbl" ) ).style.display = "none";
    }
    element.setAttribute( "checked", "" );
    document.getElementbyId( element.id.replace( elementId, "lbl" ) ).style.display = "none";
}

window.addEventListener( "load", Window_OnLoad, false );

获取调用函数的当前元素？

4 个答案: