我正在尝试动态创建元素,并因此动态为其赋予值。因此,如果我想使用存储在变量中的值访问元素,该怎么做?
我尝试使用$("#'"+g+"'")
,但没有用
var text1 = '<div id="' + g + '"></div>';
var text2 = '<input data-checkbox="' + g + '" type="checkbox" style="display:none;"/><h3 data-header="' + g + '" style="display:inline-block;">Timer' + g + ' </h3><input data-input="' + g + '" type="text" style="display:none;"/>';
var text3 = '<span data-minutes="' + g + '">00</span>:<span data-seconds="' + g + '">00 </span><button data-start="' + g + '" >start</button><button data-stop="' + g + '" style="display:none;">stop</button><button data-clear="' + g + '" style="display:none;">clear</button>';
$('#header').append(text1);
$("#'"+g+"'").append(text2, text3);
答案 0 :(得分:1)
这应该是您所需要的:
$("#" + g)
已经暗示它是字符串。
答案 1 :(得分:1)
您即将达到正确的境界;这些评论试图告诉您您没有正确形成选择器。
id的选择器必须是以下形式的字符串:
'#id'
在您的示例中,您有太多的'
符号,因此变量g
中的id将在字符串中,但被变量包围。如果g
是test-id
,则将具有以下字符串:
"#'test-id'"
...而jQuery无法与之匹敌。
您需要做的就是去掉那些引号,这可能是这样:
var g = 'any-id';
var text1 = '<div id="' + g + '"></div>';
var text2 = '<span>Some other text</span>';
$('#header').append(text1);
$('#' + g).append(text2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">Header is here</div>
答案 2 :(得分:0)
您只是有一个小错误。
您需要像这样$("#"+g).append(text2, text3);
var g = "data";
var text1 = '<div id="' + g + '"></div>';
var text2 = '<input data-checkbox="' + g + '" type="checkbox" style="display:none;"/><h3 data-header="' + g + '" style="display:inline-block;">Timer' + g + ' </h3><input data-input="' + g + '" type="text" style="display:none;"/>';
var text3 = '<span data-minutes="' + g + '">00</span>:<span data-seconds="' + g + '">00 </span><button data-start="' + g + '" >start</button><button data-stop="' + g + '" style="display:none;">stop</button><button data-clear="' + g + '" style="display:none;">clear</button>';
$('#header').append(text1);
$("#"+g).append(text2, text3);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header"></div>