JQuery,使用动态 class 创建元素
JQuery, create element with dynamic class
我正在尝试创建具有动态 class 值的元素,但目前未成功。这是代码:
let sender = "alex";
let message = "testMsg";
let time = "15:30";
let msg = $('<span>')
.append($('<span>', {class : 'timestamp'}, {text: time}))
.append($('<p>', {class : sender}, {text: message}));
结果如下:
<span>
<span id="timestamp"></span>
<p></p>
</span>
这令人困惑,因为我读到 here 这种更 "elegant" 的方式允许将变量用作动态属性。我在这里错过了什么?
谢谢
已解决:原来我试图给 .append() 函数提供 3 个参数。阅读下面的解决方案和解释。
您放错了第二个属性(文本)
var $div = $("<div>", {class: 'myClass', text: 'Some text'});
$("body").append($div)
.myClass {
background-color: black;
width: 50px;
height: 50px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
你很接近,这是我所做的小改动:
- 正确指定标签应该是
<span>
而不是</span>
- 使用正确API,可以传递多个参数。
$('<span />', {class: 'timestamp', text: time })
- 定义所有变量,即
time
未定义。
- 不应在
<span>
中插入 <p>
,由 @blex 指出
let sender = "alex",
message = "testMsg",
time = '15:30';
let msg = $('<span>')
.append($('<span>', {
class: 'timestamp',
text: time
}))
.append($('<p>', {
class: sender,
text: message
}));
$('div').append(msg)
.alex{color:green}
.timestamp{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
试试这个:
let sender = "alex";
let message = "testMsg";
let time = "15:30";
let msg = $('<span>')
.append($('<span>', {class : 'timestamp', text: time}))
.append($('<p>', {class : sender, text: message}));
我正在尝试创建具有动态 class 值的元素,但目前未成功。这是代码:
let sender = "alex";
let message = "testMsg";
let time = "15:30";
let msg = $('<span>')
.append($('<span>', {class : 'timestamp'}, {text: time}))
.append($('<p>', {class : sender}, {text: message}));
结果如下:
<span>
<span id="timestamp"></span>
<p></p>
</span>
这令人困惑,因为我读到 here 这种更 "elegant" 的方式允许将变量用作动态属性。我在这里错过了什么?
谢谢
已解决:原来我试图给 .append() 函数提供 3 个参数。阅读下面的解决方案和解释。
您放错了第二个属性(文本)
var $div = $("<div>", {class: 'myClass', text: 'Some text'});
$("body").append($div)
.myClass {
background-color: black;
width: 50px;
height: 50px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
你很接近,这是我所做的小改动:
- 正确指定标签应该是
<span>
而不是</span>
- 使用正确API,可以传递多个参数。
$('<span />', {class: 'timestamp', text: time })
- 定义所有变量,即
time
未定义。 - 不应在
<span>
中插入<p>
,由 @blex 指出
let sender = "alex",
message = "testMsg",
time = '15:30';
let msg = $('<span>')
.append($('<span>', {
class: 'timestamp',
text: time
}))
.append($('<p>', {
class: sender,
text: message
}));
$('div').append(msg)
.alex{color:green}
.timestamp{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
试试这个:
let sender = "alex";
let message = "testMsg";
let time = "15:30";
let msg = $('<span>')
.append($('<span>', {class : 'timestamp', text: time}))
.append($('<p>', {class : sender, text: message}));