Jquery append 数据属性值动态使用 html

Question

我正在使用 jquery 可排序库，我会将项目从一个列表拖放到另一个列表。在删除项目的过程中，我将更改 html 内容。我也有数据属性。

onAdd: function (evt) {            
  var df="hm "+evt.item.innerText;
  alert(df);
  var content='<div class="list-group-item " >'+evt.item.innerText+' its modified  <span class="badge badge-primary badge-pill float-right" data-job='+df+'>14</span></div>';

  $(evt.item).replaceWith(content);

},

在警报中我得到正确的附加值但在data-job中它只会设置 hm 和 evt.item.innerText 不会 append

任何人都可以帮助我正确地 append 它。

谢谢

Answer 1

您在表达式中缺少引号

使用下面的代码data-job="'+df+'"

Answer 2

由于文本之间有空格，因此空格后面的文本被视为元素的另一个属性。 您应该使用引号data-job="'+df+'"来包装文本。

虽然我更喜欢使用更干净、更易于使用的模板文字：

模板文字是允许嵌入表达式的字符串文字。 您可以使用多行字符串和字符串插值功能。 在 ES2015 规范的早期版本中，它们被称为“模板字符串”。

演示：

 function test(evt) { var df="hm "+evt.target.innerText; var content=`<div class="list-group-item">evt.target.innerText its modified <span class="badge badge-primary badge-pill float-right" data-job='${df}'>14</span></div>`; console.log(df); console.log(content); $('body').append(content); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div onclick="test(event)">test</div>