对同位素中的动态元素进行排序
Sorting dynamic elements in isotope
我正在使用 jQuery 的 $.each 循环和在 Google 表格 (Tabletop.js) 中创建的 JSON 文件构建船舶列表,并尝试用 Isotope.js.
对它们进行排序
jQuery 创建列表没有任何问题。但是,当我单击我的按钮以通过同位素对元素进行排序时,没有任何反应。
当我将元素硬编码到我的 HTML 页面时,Isotope 可以毫无问题地对所有内容进行排序。
我在网上找遍了,找不到答案。
带有回调到另一个函数的循环,该函数从电子表格中获取我的数据。 #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 demo。一个列表是在 JS 中生成的,而另一个是在 HTML.
中生成的
有两个问题需要解决。
将#sorts 更改为:
<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>");
});
我正在使用 jQuery 的 $.each 循环和在 Google 表格 (Tabletop.js) 中创建的 JSON 文件构建船舶列表,并尝试用 Isotope.js.
对它们进行排序jQuery 创建列表没有任何问题。但是,当我单击我的按钮以通过同位素对元素进行排序时,没有任何反应。
当我将元素硬编码到我的 HTML 页面时,Isotope 可以毫无问题地对所有内容进行排序。
我在网上找遍了,找不到答案。
带有回调到另一个函数的循环,该函数从电子表格中获取我的数据。 #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 demo。一个列表是在 JS 中生成的,而另一个是在 HTML.
中生成的有两个问题需要解决。
将#sorts 更改为:
<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>");
});