添加动态元素并为它们设置不同的onclick功能

时间:2017-08-14 06:23:20

标签: javascript html dom

我想创建动态链接元素。我创建了一个函数来创建一个元素并为它附加一个onclick函数:

    for (var i = 7; i > 0; i--) {
        var date = moment().add(-i, 'days')
        var dateFormatted = date.format('YYYY-MM-DD');

        // Magic happens here
        divDates.appendChild(createLink('<a href="#">' + dateFormatted + '</a>',
            function () { alert(dateFormatted); }));
    }

function createLink(s, onClick) {
    var a = document.createElement('a');
    if (s.indexOf('target="_blank"') >= 0) {
        a.target = '_blank';
    }

    var href = s.match(/href="([^"]*)/)[1];
    var text = s.match(/>([^<]*)/)[1];

    a.href = href;
    a.title = text;
    a.onclick = onClick;
    a.appendChild(document.createTextNode(text));

    return a;
}

但是alert(dateFormatted)显示相同的消息,无论我点击哪个链接。我怎样才能使它们独立工作?

1 个答案:

答案 0 :(得分:2)

试试这个:

for (var i = 7; i > 0; i--) {
    (function (i) {
        var date = moment().add(-i, 'days')
        var dateFormatted = date.format('YYYY-MM-DD');

        // Magic happens here
        divDates.appendChild(createLink('<a href="#">' + dateFormatted + '</a>',
            function () { alert(dateFormatted); }));
    })(i);
}