Javascript -显示和添加基于日期的图像

Question

我想创建一个登陆页面，在那里我逐渐显示我们的降临日历奖金。为此，我准备了图像，然后将在DIV中显示。

所以直到12月1日你才会看到任何照片。12月1日，人们看到了照片0102。12月1日看到图片01 & &;图02等等

到目前为止，我已经找到了以下代码。不幸的是，只有带有今天日期的DIV显示给我。我要怎么做才能保留图像?这是我的小提琴:https://jsfiddle.net/bkoenig/m2pzqjrs/14/

<div class="imageClass image1">
1
</div>
<div class="imageClass image2">
2
</div>
<div class="imageClass image3">
3
</div>

var now = new Date().toDateString();
var october1 = new Date("November 22, 2022").toDateString();
var october2 = new Date("November 23, 2022").toDateString();
var october3 = new Date("November 24, 2022").toDateString();

if(now != october1) // today is after Christmas
{
// an id of a div that holds your images?
$('#div_id').hide(); 
// or a class of images
$('.image1').hide();
}

if(now != october2) // today is after Christmas
{
// an id of a div that holds your images?
$('#div_id').hide();
// or a class of images
$('.image2').hide();
}
if(now != october3) // today is after Christmas
{
// an id of a div that holds your images?
$('#div_id').hide();
// or a class of images
$('.image3').hide();
}

.imageClass {
display: ;
}

Answer 1

我有一个例子来解决你的问题，希望对你有所帮助

(function () {
const now = new Date();
$("#imageDate img").each(function () {
const el = $(this);
const date = new Date(el.attr('data-date'));
console.log(now, date)
if (date <= now) {
el.show();
}
});
})();

#imageDate img {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imageDate">
<img src="" data-date="November 22 2022" alt="22/11/2022" />
<img src="" data-date="November 23 2022" alt="23/11/2022" />
<img src="" data-date="November 24 2022" alt="24/11/2022" />
</div>