javascript - 动态html生成div id麻烦

Question

所以我正在构建这个功能，动态输出一个新的“面板”(一些 html 片段)。然而，问题是新创建的 div 缺少 id，尽管我明确地为其分配了 id。 id 应该是一个名称，其数字在每次生成新 div 时都会递增(name1、name2 等)。但我无法让 div 接受我分配给它的 id。

//add panel
  var i = 1; 
        $('#panel').click(function() { 
        $('body').append("<div id='photoContent" + i + "'><h1> Panel </h1><div id='showTable'><h2>add image</h2><div id='table'></div></div></div>").css({
            'margin' : '0px', 
            'padding' : '0px',
            'height' : height, 
            'width' : width,
            'background-color' : 'yellow', 
            'color' : 'rgba(192, 192, 192, .9)',
            'font-family' : 'sans-serif', 
            'font-size' : '40px',
            'text-align' : 'center',
            'border' : '2px solid rgba(192, 192, 192, 1)',
            'border-left-style' : 'none',
            'border-right-style' : 'none'
        }); //close css object literal; 
i++; }); //end click function 

如有任何帮助，我们将不胜感激。

Answer 1

您的代码中有错误。

如果您删除代码中的此注释，它就会起作用:

//some css

哪个在里面

.css ({//some css}); 

这是一个工作 jsfiddle without .css .

这是一个工作 jsfiddle with .css

问题是什么？

右括号被注释掉，因此你有一个非常明显的语法错误，它看起来就像这样:

 .css ({ uh, oh, no right parenthesis :(

编辑

您更新了代码，删除了导致错误的注释，您的解决方案工作正常，如下所示 demo显示。

The id is supposed to be a name with a number that increments on each generation of a new div (name1, name2, etc.). But I cannot get the div to accept the id that I am assigning it.

如果我单击面板 2 次，则会创建以下 html:

<div id="photoContent1"><h1> Panel </h1><div id="showTable"><h2>add image</h2><div id="table"></div></div></div>
<div id="photoContent2"><h1> Panel </h1><div id="showTable"><h2>add image</h2><div id="table"></div></div></div>