0
表示なしの後に正常に動作しない、 はここに私の問題だ... 石造私は現在、リストを作るために石工を使用してい
は私がdivコンテンツ、 のいくつかの異なる種類を持っていると私はそれが表示したいです一度に1つのタイプのみが表示されます。
私は、display:noneをjavascriptで除外されたdivに適用し、選択したdivにdisplay:blockを適用します。
しかし、私は、石積みを呼び出した後、奇妙な、それは私が期待したものではありません一つの列に表示さdivラインアップ、のすべてを作る、です...
は、ここに私のコードです：
$(function() {
\t
let m = $('#masonry');
let item = $('.item');
m.masonry({
\t itemSelector: '.item',
columnWidth: 0
});
$('#false').on('click', function() {
\t for(let i = 0; i < item.length; i ++) {
\t $(item[i]).show();
}
\t \t
\t for(let i = 0; i < item.length; i ++) {
if($(item[i]).data('hide') != false) {
$(item[i]).hide();
} else {
$(item[i]).show();
}
}
m.masonry();
})
$('#true').on('click', function() {
\t for(let i = 0; i < item.length; i ++) {
\t $(item[i]).show();
}
for(let j = 0; j < item.length; j ++) {
\t if($(item[j]).data('hide') != true) {
\t $(item[j]).hide();
} else {
\t $(item[j]).show();
}
}
m.masonry();
})
$('#pooo').on('click', function() {
\t for(let i = 0; i < item.length; i ++) {
\t $(item[i]).show();
}
for(let j = 0; j < item.length; j ++) {
\t if($(item[j]).data('hide') != null) {
\t $(item[j]).hide();
} else {
\t $(item[j]).show();
}
}
m.masonry();
})
}).item {
padding: 5px;
width: 20%;
}
.inner {
background: pink;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<div id="masonry">
<div class="item">
<div class="inner">
<br><br><br><br><br><br>
</div>
</div>
<div class="item" data-hide="null">
<div class="inner"><br><br><br><br><br></div>
</div>
<div class="item" data-hide="true">
<div class="inner"><br><br><br></div>
</div>
<div class="item" data-hide="false">
<div class="inner"><br><br><br><br><br></div>
</div>
<div class="item" data-hide="true">
<div class="inner"><br><br><br></div>
</div>
<div class="item" data-hide="null">
<div class="inner"><br><br><br><br><br></div>
</div>
<div class="item" data-hide="true">
<div class="inner"><br><br><br><br></div>
</div>
<div class="item" data-hide="false">
<div class="inner"><br><br><br><br></div>
</div>
<div class="item" data-hide="null">
<div class="inner"><br><br><br></div>
</div>
<div class="item" data-hide="false">
<div class="inner"><br><br><br><br><br><br><br><br></div>
</div>
</div>
<button id="false">false</button>
<button id="true">true</button>
<button id="pooo">pooo</button>いずれかを示唆していますか？
OK ...私はこれが...最初の石工の項目を非表示にすることで、発生することがありそして、私はそれに取り組んでいた、願いを考える
$.masonry({columnWidth: '#theDivWithWidth'})、それはトリックを行う必要があります...私は運がいい。 XD – LeoCantThinkofAName