javascript - 在 .onclick 函数的方法中调用选定的循环元素

Question

我尝试addProject()使用第二个参数作为循环中的当前选定元素调用该方法。但是参数的参考是null，当我打电话时addProject()。

我认为当我使用.onclick按钮时，循环中当前选定参数的引用会丢失。但是我怎样才能以不同的方式将这个论点赋予方法呢？

$(document).ready(function () {
    for (var i = 0; i <= proj_array.length - 1; i++) {
        var h = document.createElement("h1");
        var p = document.createElement("p");
        p.innerHTML = proj_array[i].projectdescription;
        h.innerHTML = proj_array[i].projectname;

        $(".projectsList").append(h).append(p);

        var button = document.createElement("button");
        button.style.width = "70px";
        button.style.height = "27px";
        button.innerHTML = "Add";

        $(button).addClass("enable");
        button.onclick = function () {
            if ($(button).hasClass("enable")) {
                addProject(this, proj_array[i]);
            }
        }
        $(p).append(button);
    }
    $(".projectsList").accordion();
});

Answer 1

你需要一个闭包：

(function(proj) {
    $(button).on('click', function() {
        if ( $(this).hasClass("enable") ) {
            addProject(this, proj);     
        }
    });
})(proj_array[i]);

或者你可以坚持使用 jQuery 而不会太复杂：

$(function() {
    $.each(proj_array, function(i, proj) {
        var h = $('<h1 />', {html: proj.projectdescription}),
            p = $('<p />', {html: proj.projectname}),
            button = $('<button />', {
                                      width  : '70px',
                                      height : '27px',
                                      html   : 'Add',
                                      'class':'enable'
                                     });

        button.on('click', function() {
            if ($(this).hasClass("enable")) {
                addProject(this, proj);     
            }
        });
        $(p).append(button);
        $(".projectsList").append(h, p).accordion();
    });
});

Answer 2

将其存储为data-*属性：

var button = document.createElement("button");
$(button).data('proj', proj_array[i]);

在onclick您可以检索它：

if($(this).hasClass("enable")) {
    addProject(this, $(this).data('proj'));
}

也$(this)不要$(button)在点击处理程序中使用。