Question

我正在尝试使用codepen上的list.js创建一个可排序列表。以下是我到目前为止的代码：

HTML：

<h1>FCC News Viewer</h1>
<div id="users">
    <form id="searchbox">
      <input type="form" class="search" id="magnifying_glass"></input>
    </form>
  <div id="sort-by">
    <button class="sort" data-sort="date">Sort by date</button>
    <button class="sort" data-sort="rank">Sort by rank</button>
    <button class="sort" data-sort="author">Sort by author</button>
  </div>
  <ul class="list">
  </ul>
</div>

使用Javascript：

$('document').ready(function(){
  $.getJSON("http://www.freecodecamp.com/news/hot", function(json) {
    for (i=0; i<Object.keys(json).length; i++) {
      $('ul').append("<li class='article'><img src="+json[i].author.picture+"\><a href="+json[i].link+" class='headline'>"+json[i].headline+"</a><br><a href='http://www.freecodecamp.com/"+json[i].author.username+" class='author'>"+json[i].author.username+"</a><p class='rank_text'>"+"&hearts;"+"<span='rank'>"+json[i].rank+"</span></p><p class='date'></p></li>")
      if (i == Object.keys(json).length-1) {
        var options = {
      valueNames: [ 'date', 'rank', 'author' ]
        };
        var userList = new List('users', options);
      }
    }
  })
})

我已经加载了jquery和list.js库。当我按下任何排序按钮时，我创建的100个元素的三个元素移动，甚至根据排序类别。还有什么比创建一个我可以丢失的可排序列表更多吗？

Answer 1

我注意到打开和关闭引号（双和单）的问题，也应该在选项中包含日期，即使我没有在文档中明确写出它，但似乎排序类应该是附加到li项目的直接子项 - 这是我的固定排名排序。这就是我调整你的codepen js的方法：

$('document').ready(function(){
  $.getJSON("http://www.freecodecamp.com/news/hot", function(json) {
    for (i=0; i<Object.keys(json).length; i++) {
      $('ul').append(
        "<li class='article'>" + 
        "<img src='" + json[i].author.picture + "' /'>" + 
        "<a href='" + json[i].link + "' class='headline'>" + 
        json[i].headline + 
        "</a><br>" + 
        "<a href='http://www.freecodecamp.com/" + json[i].author.username +
        "' class='author'>" + json[i].author.username + "</a>" +
        "<p class='rank'>&hearts;<span='rank-span'>"
        + json[i].rank + "</span></p><p></p></li>");

      if (i == Object.keys(json).length-1) {
        var options = {
          valueNames: [ 'rank', 'author' ]
        };
        var userList = new List('users', options);
      }
    }
  })
})

Answer 2

我强烈建议不要混合使用Javascript文件中的任何HTML代码。你所拥有的被认为是突兀的。在你考虑到嵌入在Javascript中的HTML后，我会重新定义问题，这可能会导致一些非常混乱且难以理解的代码。表达和行为的分离非常重要。

请参阅： https://en.wikipedia.org/wiki/Unobtrusive_JavaScript

以下是有关此问题的代码部分：

$('ul').append(
"<li class='article'><img src="+json[i].author.picture+"\>
<a href="+json[i].link+" class='headline'>"+json[i].headline+"</a>
<br><a href='http://www.freecodecamp.com/"+json[i].author.username+" class='author'>"+json[i].author.username+"</a>
<p class='rank_text'>"+"&hearts;"+"<span='rank'>"+json[i].rank+"</span></p><p class='date'></p></li>")

list.js不使用$ .getJSON动态创建的动态创建元素

2 个答案: