我有一个非常奇怪的问题
我正在加载两个单独的 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
关于javascript - 同位素 jQuery 的多个实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12252221/