Packery を使用して奇妙な問題があります。以下は私のコードです。
ドロップダウンメニューから選択したときに表示(デフォルト)から非表示に切り替えると、正常に機能します。
ロード時に非表示にして、ドロップダウンから選択したときにクラスを表示したい場合、機能しません。常に最後の写真が表示されます。
問題が何であるかを理解できないようです。誰でも助けてもらえますか?
<select id="DateFilter">
<option selected>Choose Date</option>
<option id="yesterday">yesterday</option>
<option id="today">today</option>
</select>
<div id="container" class="js-packery" data-packery-options='{ "itemSelector": ".item", "gutter": 0 }'>
<div class="yesterday">
<div class="item">
<figure><img src="pic1.jpg" width="100%"><figcaption>Pic 1</figcaption></figure>
</div>
<div class="item">
<figure><img src="pic2.jpg" width="100%"><figcaption>Pic 2</figcaption></figure>
</div>
<div class="item">
<figure><img src="pic3.jpg" width="100%"><figcaption>Pic 3</figcaption></figure>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".yesterday").show();
$("#DateFilter").change(function(){
if($(this).find("option:selected").attr("id")=="yesterday"){
$(".yesterday").hide();
}
});
});
</script>