[英]Multiple instances of isotope jQuery
我有一個很奇怪的問題
我正在加載兩個單獨的div,如下所示,span元素是為了存儲每個同位素實例中每行存在多少個項目
<div class='instagram' id='insta12'>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<span id="hiddenValue" >5</span>
</div>
<div class='instagram' id='insta101'>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<span id="hiddenValue">3</span>
</div>
我的js文件如下圖
jQuery(document).ready(function($) {
var tmpNum="";
var numberOfImages=3;
var $container = $('.instagram');
$container.each(function () {
tmpNum= $(this).find('span#hiddenValue').text();
numberOfImages=parseInt(tmpNum);
var tmpid=$(this).attr("id");
alert(tmpid);
$("#"+tmpid).imagesLoaded(function() {
$("#"+tmpid).isotope({
resizable: false,
// disable normal resizing
// set columnWidth to a percentage of container width
masonry: {
columnWidth: $("#"+tmpid).width() / numberOfImages
}
});
}); //isotope
}); //each
}); //dom ready
盡管腳本似乎可以正常工作,但第二個容器每行的項目與第一個容器一樣多。 有任何想法嗎?
解決了
jQuery(document).ready(function($) {
var tmpNum = "";
var $container = $('.instagram');
$container.each(function() {
var tmpid = $(this).attr("id");
tmpNum = $("#" + tmpid + " span#hiddenValue").text();
var numberOfImages = parseInt(tmpNum, 10);
$(this).imagesLoaded(function() {
$(this).isotope({
resizable: false,
// disable normal resizing
// set columnWidth to a percentage of container width
masonry: {
columnWidth: $(this).width() / numberOfImages
}
});
}); //isotope
}); //each
}); //dom ready
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.