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

calling the selected loop element in a method in a .onclick function

本文关键字：循环 元素 方法 onclick 函数 调用      更新时间：2023-09-26

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

我认为当我使用.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();
});

你需要一个闭包:

(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();
    });
});

将其存储为data-*属性:

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

在onclick中您可以检索它:

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

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

相关文章：