Question

我有一个降临节日历应用程序，设置为当您点击一扇门时它会选择一个随机图像。我想将它包装在getDate函数中，这样你就只能在特定日期“打开”那扇门。我不知道从哪里开始，任何帮助都会受到赞赏 - 我是JS的新手

链接：http://p3.katecooperuk.com

我的HTML：

<div id='calendar'>
<div class='doors' id='dec1'>1</div>
<div class='doors' id='dec2'>2</div>
<div class='doors' id='dec3'>3</div>
<div class='doors' id='dec4'>4</div>
<!-- etc... --!>
<div class='doors' id='dec24'>24</div>
</div

我的JS：

设置拼接选择随机图像并确保它仅使用一次

function getRandomImage(arr) {

    if (arr.length > 0) { 
    random = Math.floor(Math.random()*arr.length)
    return arr.splice(random, 1)[0];
    } 

}

设置日期

var today = new Date()
var day = today.getDate()

console.log(today);

门打开 - 从数组中选择随机背景图像

$('.doors').click(function () {

    if (today.getMonth() !== 11) {
        return;
    }

    if ($(this).attr('id') <= 'dec' + day) {

        // Select Random Image
        var doorImage = getRandomImage(calendarImg); 

        // Change background image of door that was clicked
        $(this).css('background-image', doorImage);

        return;  
    }

    // Show image telling user to come back
    $(this).css('background-image', 'url(/images/come_back.png)');

});

Answer 1

最简单的解决方案是将onclick处理程序仅附加到当天的“门”而不是所有“门”。您已经为“门”提供了当前日期和良好的id，只需使用它们：

$('#dec' + day).click(function(){...});

修改

看起来您已在帖子中更改了代码。如果您想告诉用户点击错误的门，则无法使用上述代码。做这样的事情：

$('.doors').click(function () { if (today.getMonth() !== 11) { return; } if ($(this).attr('id') !== 'dec' + day) { $(this).css('background-image', 'url(/images/come_back.jpg)'); return; } // show the image });

A live demo at jsFiddle

在div上使用getDate函数

1 个答案: