Question

我正在尝试创建具有动态类值的元素，到目前为止还没有成功。这是代码：

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这更加优雅＆＃34; way允许将变量用作动态属性。我在这里缺少什么？

由于

解决：事实证明我试图给.append（）函数提供3个参数。请阅读下面的解决方案和解释。

Answer 1

你很亲密，以下是我所做的小改动：

正确指定标记应该是而不是
使用正确的API，您可以传递多个参数。 $('', {class: 'timestamp', text: time })
定义所有变量，即time未定义。
不应在内插入，@blex指出

＆＃13;

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)

＆＃13;

.alex{color:green}
.timestamp{color:red}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

＆＃13;

Answer 2

试试这个：

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}));

https://jsfiddle.net/MostafaB/hhadxdxe/

Answer 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>

JQuery，用动态类创建元素

3 个答案: