Question

我目前正在开发一个带有html，jQuery和PHP的“模板”创建系统。所以界面是非常基本的，当前添加div的按钮，这些div有内容，如按钮，textareas，复选框等。

当我点击一个按钮时，会添加div;现在我还想将这个新的div ID存储到一个带有jQuery的数组中，同时将这个数组输出到一个单独的div中，其ID为overview。

我当前的脚本如下所示：

function getSteps() {
        $("#template").children().each(function(){
            var kid = $(this);
            //console.log(kid.attr('id'));
            $('div.overview').append(kid.attr('id'))
        });
    }

    $('button').on('click', function() {
        var btnID = $(this).attr('id');
        $('<div></div>', {
            text: btnID,
            id: btnID,
            class: item,
        }).appendTo('div.template');
    });

    $(document).ready(function() {
        getSteps();
    });

现在，函数getSteps是我想要检索所有div的ID并将它们存储到数组中的地方。当我点击其中一个按钮时，我希望他们在我的#template div中添加带ID的div。

我在Chrome控制台中出现错误：

Uncaught ReferenceError: item is not defined
(anonymous function)createtemplate.php:111
f.event.dispatchjquery.min.js:3
f.event.add.h.handle.i

我有点失落，并希望向正确的方向努力。谢谢。

Answer 1

你可以做（检索所有div的ID并将它们存储到数组中。）

function getSteps() {
    var ids = [];
    $("#template").children().each(function(){
        ids.push(this.id);
    });
    return ids;
}

$(document).ready(function() {
   var arrayOfIds = getSteps();
});

Answer 2

您收到该错误是因为您尝试使用不存在的名为 item 的变量。我想你想要一个名为 item 的类，在这种情况下你应该写

class:"item",

此外，您将新div添加到具有 class “template”的元素，并且您的getSteps函数正在搜索 id “template”的元素。

认为使用您的代码，当DOM准备就绪时，getSteps函数会执行一次。如果你想在每次添加div时刷新id的列表，你应该在你的代码中为click事件做这个：

function getSteps() {
    $('div.overview').empty();
    $(".template").children().each(function(){
        var kid = $(this);
        //console.log(kid.attr('id'));
        $('div.overview').append(kid.attr('id'))
    });
}


$(document).ready(function() {

    $('button').on('click', function() {
        var btnID = $(this).attr('id');
        $('<div></div>', {
            text: btnID,
            id: btnID,
            class: 'item',
        }).appendTo('div.template');
        getSteps();
    });

});

使用jQuery检索多个DIV的ID并存储在数组中

2 个答案: