动态onclick变量范围在javascript中

时间:2013-10-01 07:20:49

标签: javascript dynamic onclick

我有一个运行onload的javascript函数。它按类查找锚标记,并根据标记中的数据添加onclick函数。我的问题是变量'h'包含href的一部分。它将被设置为该函数的最后评估。因此,如果h的最后一个值是“s-g123”,则页面上的所有链接都将此值作为插入链接的值。如何在运行时修复h的值,这是静态的?提前谢谢。

// converts <a href='#g123' class="shoh"> to <a href='#g123' onclick=function() { shoh( 's-g123', 'show') }">
function managelinks() {
var elems = document.getElementsByTagName('*'), i;
var h, pos;
for (i = 0; i < elems.length; i++) {
    if ((elems[i].className).indexOf('shoh') > -1) {
        if ((pos = elems[i].href.indexOf('#')) > -1) {
            h = "s-" + elems[i].href.substr(pos + 1);
            elems[i].onclick = function () {
                shoh(h, 'show')
            };
        }
    }
}

1 个答案:

答案 0 :(得分:2)

如果您不必支持旧的延迟浏览器,可以使用以下内容:

function managelinks() {
    // querySelectorAll should work with ie8+
    var elems = document.querySelectorAll('a.shoh'), i;
    var h, pos, elem;
    for (i = 0; i < elems.length; i++) {
        elem = elems[i];
        h = elem.hash.substr( 1 );
        if ( h ) {
            // remember the value of h by making a closure
            elem.onclick = (function( myH ){
                return function () {
                    shoh( myH, 'show');
                };
            })( h );
        }
    }
}

如果您还使用了jQuery库(或更小的ZeptoJS),那么您的功能可能会短得多:

function managelinks() {
    $(document).on('click', 'a.shoh', function(){
        var h = this.hash.substr( 1 );
        if ( h )  shoh( h, 'show');
    });
}

请参阅http://api.jquery.com/on/http://zeptojs.com/#on