Question

Javascript代码：

function createdivs() 
{
        var i = 1;
        $.ajax({ url: 'displaycontent.php',
         data: {action:'test'},
         type: 'post',
         datatype: 'json',
         success: function(output) {
            var a = JSON.parse(output);
            var b = a.length;
            var i;
            for (i = 0; i < b;i++){
            console.log(a[i]['idi']);
            console.log(a[i]['pgmname']);
            console.log(a[i]['comp']);
            console.log(a[i]['datephp']);
            if (a[i]['idi'] != 0){
            for (var j=0 ;j < 1;j++)
            {

            var editp = document.createElement("button","span");
            document.getElementById('contentdisplay'+i).appendChild(editp);
            editp.className = "glyphicon glyphicon-pencil";
            editp.id = "editprogramsbutton"+i;
            $("#editprogramsbutton"+i).click(function(){
                editp.value = i;
                alert(i);
            });

            }

            }
            }

        }

    });  

}

假设循环运行3次，我可以创建三个按钮，ID为editprogramsbutton0，editprogramsbutton1，editprogramsbutton2。问题是当我使用

提醒时

$("#editprogramsbutton"+i).click(function(){
                    editp.value = i;
                    alert(i);
                });

无论我按哪个按钮，我总是得到3的值。我知道'i'的值设置为3，只要按下按钮，它就会显示最后更新的值。当我按下“editprogramsbutton0”时我想要“0”这样的值，当我按下“editprogramsbutton1”时按“1”等等。有人可以通过代码中的可能更改来解释如何执行此操作的逻辑。提前谢谢。

Answer 1

这是关键，您必须在click函数之外定义值，否则它会将值更新为最后i集。然后调用e.target.value（确保e在函数调用中定义）或this.value（在事件处理程序中，这指的是被单击的元素）

editp.value = i;
editp.addEventListener('click', function(e) {
    alert(e.target.value);
}, false);

在下面隐藏的代码段中，我简化了您的脚本并删除了不必要的行和文档调用。

function createdivs() {
    $.ajax({
        url: 'displaycontent.php',
        data: { action: 'test' },
        type: 'post',
        datatype: 'json',
        success: function (output) {
            var a = JSON.parse(output);
            var fullDisplay = document.getElementById('fulldisplay');
            for (var i = 0; i < a.length; i++) {
                console.log(a[i]['idi']);
                console.log(a[i]['pgmname']);
                console.log(a[i]['comp']);
                console.log(a[i]['datephp']);
                if (a[i]['idi'] != 0) {
                    fullDisplay.style.visibility = "visible";
                   
                    var list = document.createElement("div");
                    list.className = "container content-rows content";
                    list.id = "contentdisplay" + i;
                   
                    var sno = document.createElement("span");
                    sno.className = "col-md-1 snocontent text_center_align";
                    sno.id = "snocontent" + i;
                    sno.innerHTML = a[i]['idi'];
                    list.appendChild(sno);
                   
                    var pgmno = document.createElement("span");
                    pgmno.className = "col-md-3 pgmnamecontent";
                    pgmno.id = "pgmnocontent" + i;
                    pgmno.innerHTML = a[i]['pgmname'];
                    list.appendChild(pgmno);
                   
                    var cmpno = document.createElement("span");
                    cmpno.className = "col-md-3 cmpcontent";
                    cmpno.id = "cmpnocontent" + i;
                    cmpno.innerHTML = a[i]['comp'];
                    list.appendChild(cmpno);
                   
                    var dateno = document.createElement("span");
                    dateno.className = "col-md-2 datecontent";
                    dateno.id = "datenocontent" + i;
                    dateno.innerHTML = a[i]['datephp'];
                    list.appendChild(dateno);
                   
                    var addtra = document.createElement("button", "span");
                    addtra.className = "glyphicon glyphicon-king";
                    addtra.id = "addtrainersbutton" + i;
                    list.appendChild(addtra);
                   
                    var editp = document.createElement("button", "span");
                    editp.className = "glyphicon glyphicon-pencil";
                    editp.id = "editprogramsbutton" + i;
                    editp.value = i;
                    editp.addEventListener('click', function(e) {
                        alert(e.target.value);
                    }, false);
                    list.appendChild(editp);
                   
                    var assigntra = document.createElement("button", "span");
                    assigntra.className = "glyphicon glyphicon-user";
                    assigntra.id = "assigntrainersbutton" + i;
                    list.appendChild(assigntra);
                   
                    var deletep = document.createElement("button", "span");
                    deletep.className = "glyphicon glyphicon-pencil";
                    deletep.id = "deleteprogrambutton" + i;
                    list.appendChild(deletep);
                   
                    fullDisplay.appendChild(list);
                }
            }
        }
    });
}

如何为每个按钮设置唯一值以识别它们？

1 个答案: