同位素中的动态元素分类

Question

我正在构建一个船舶列表，使用jQuery的$.each循环和在Google Sheets(Tabletop.js(中创建的JSON文件，并尝试使用同位素.js对它们进行排序。

jQuery创建的列表没有任何问题。然而，当我点击按钮通过同位素对元素进行排序时，什么也没发生。

当我将这些元素硬编码到HTML页面中时，同位素会对所有内容进行排序。

我在网上到处找都找不到答案。

带有对另一个函数的回调的循环，该函数从电子表格中获取我的数据。#port是我的HTML中的一个div，所有内容都在这里。

这是我正在使用的代码。

function showInfo(data, tabletop) {
    var shipData = tabletop.sheets('data').all();
    var items=[];
    $.each(shipData, function(i) {
        //Put each ship in the port ^__-
        var ship = "<div class="ship"><div class="row"><p class="name font-lg">" + shipData[i].name + "</p><p class="cruise-line font-xs">" + shipData[i].line +"</p><div class="ship-photo col-md-9 col-sm-9"><img src="img/" + shipData[i].img + "" class="img-responsive"></div><div class="ship-info col-md-3 col-sm-3"><div class="row"><div class="header font-xs col-sm-4 col-xs-4">Launched</div><div class="header font-xs col-sm-4 col-xs-4">Length</div><div class="header font-xs col-sm-4 col-xs-4">Tonnage</div></div><div class="row"><div class="year font-lg col-sm-4 col-xs-4">" + shipData[i].launchYear +"</div><div class="length font-lg col-sm-4 col-xs-4">" + shipData[i].length + "'</div><div class="weight font-lg col-sm-4 col-xs-4">" + shipData[i].tonnage + "</div></div></div><div class="ship-info col-md-3 col-sm-3"><div class="row"><div class="header font-xs col-sm-6 col-xs-6">Max capacity</div><div class="header font-xs col-sm-6 col-xs-6">Crew</div></div><div class="row"><div class="max-passenger font-lg col-sm-6 col-xs-6">" + shipData[i].maxCapacity + "</div><div class="crew font-lg col-sm-6 col-xs-6">" + shipData[i].crewCapacity + "</div></div></div></div>";
            items.push(ship);
      });
    $port.append(items)
}

这是我的同位素分类代码：

// init Isotope
    $('#port').isotope({
        itemSelector: ".ship",
        layoutMode: 'vertical',
        getSortData: {
            name: '.ship'
        }
    })
// bind sort button click
$('#sorts').on( 'click', 'button', function() {
     var $this = $(this);
     var sortValue = $this.attr('data-sort-value');
     $('#port').isotope({ 
            sortBy: sortValue 
     });
  });

这是我的HTML:

<div class="compare">
    <h3>How the ships compare</h3>
    <div id="sorts" class="button-group">
                <button class="button" data-sort-value="name">name</button>
                <button class="button" data-sort-value="length">length</button>
                <button class="button" data-sort-value="weight">weight</button>
                <button class="button" data-sort-value="passengers">passenger</button>
                <button class="button" data-sort-value="original-order">clear</button>      
            </div>
        </div>
<div id="port"></div>

JSFiddle演示。一个列表是用JS生成的，而另一个则是用HTML生成的。

Answer 1

需要解决两个问题。

将#排序更改为：

<button id="sort"  data-sort-value="name">Click to sort</button>

以及您的数据功能：

$.each(data, function (i) {
$('.port').append("<li><div class='name'>" + data[i] + "</div></li>");
});