javascript - 将数据属性添加到附加对象 src

Question

我想附加一个指向多个列表项的链接，将数据属性传递到 URL 的末尾。但是我不明白如何使变量“storyId”为 .Story 的每个实例保留不同的值

<div id="InnerPage">
  <ol>
    <li class="Story" data-id="35213">Text for Link 1 </li>
    <li class="Story" data-id="35204">Text for Link 2 </li>
  </ol>
</div>

<script>
  var storyId = this.getAttribute('data-id');
  var sidebarURL = "'index.html?storyid=' + storyId"
  var newA = document.createElement('a');
  newA.setAttribute('href',sidebarURL);
  newA.innerHTML = "Split View";

  $('.Story').append([newA]);
</script>

应该导致:

<div id="InnerPage">
  <ol>
    <li class="Story" data-id="35213">Text for Link 1 <a href="index.html?storyid=35213">Split View</a></li>
    <li class="Story" data-id="35204">Text for Link 2 <a href="index.html?storyid=35204">Split View</a></li>
  </ol>
</div>

http://jsfiddle.net/s3wtsxw5/

Answer 1

你可以这样做:

$("#InnerPage ol li").each(function() {
    var id = $(this).data("id");
    var link = "index.html?storyid=" + id;
    $(this).append("<a href='" + link + "'>Split View</a>");
});