Question

我的客户在他的网站上提供在线订购，但每天他都有不同的交货时间。他在外部网站上使用第三方解决方案来处理在线订单，我们不希望将用户转移到该网站，除非有在线订购。因此，我构建了一个粗略的模态警报框，单击此按钮将向用户显示一条消息，指示在线订购可用，并带有指向外部站点的链接。代码使用new Date().getDay();来确定当前日期，然后使用一系列if & else if语句来显示正确的模态。这一切都有效，但由于我们有不同的交付时间，因此我需要为每个else语句显示一个if条件，其中包含不同的消息，显示第二天的交付时间模式。

就像我说的那样，这有点粗糙，很可能会被重构为更少的代码行。但是，如果我可以为每个if添加一个else条件，那么这就是我现在真正需要的。谢谢。

If / Else If Statements

var monStartTime = '4:00 PM';
var monEndTime = '8:00 PM';

var teuStartTime = '11:00 AM';
var teuEndTime = '9:00 PM';

var wedStartTime = '11:00 AM';
var wedEndTime = '9:00 PM';

... 

var curr_day = new Date().getDay();
var curr_time = getval();

if (curr_day == '1' && get24Hr(curr_time) > get24Hr(monStartTime) && get24Hr(curr_time) < get24Hr(monEndTime)) {
    document.querySelector('#alert-success').onclick = function() {
        $.sweetModal({
            content: '<h2>Online Ordering is Available!</h2>' +
                'Please click the button below to begin your online order.' +
                '<div class="sweet-modal-buttons"><a href="http://pizzospizzeria.hungerrush.com" target="_blank" class="button greenB">Start Order</a></div>',
            // icon: $.sweetModal.ICON_SUCCESS
        });
    };
} else if (curr_day == '2' && get24Hr(curr_time) > get24Hr(teuStartTime) && get24Hr(curr_time) < get24Hr(teuEndTime)) {
    document.querySelector('#alert-success').onclick = function() {
        $.sweetModal({
            content: '<h2>Online Ordering is Available!</h2>' +
                'Please click the button below to begin your online order.' +
                '<div class="sweet-modal-buttons"><a href="http://pizzospizzeria.hungerrush.com" target="_blank" class="button greenB">Start Order</a></div>',
            // icon: $.sweetModal.ICON_SUCCESS
        });
    };
} else if ...

我需要将其中一个Else语句压缩到其他所有内容中

...

} else {
    document.querySelector('#alert-success').onclick = function() {
        $.sweetModal({
            content: '<h2>Online Ordering is Not Available</h2>' +
                'Online ordering will be available again tomorrow from 11:00am to 9:00pm',
            // icon: $.sweetModal.ICON_ERROR,
            buttons: [{
                label: 'Close',
                classes: 'redB'
            }]
        });
    };
}
...

Answer 1

var days = {
    // sunday
    '1': { startTime: '4:00 PM', endTime: '4:00 PM' },
    // monday
    '2': { /* ... */ },
    // ...
};

var curr_day = new Date().getDay();
var curr_time = getval();

var day = days[curr_day]; // get the current day object from the days object

if(day) {                 // if day is supported
    // check if day.startTime < curr_time < day.endTime
    if(get24Hr(curr_time) > get24Hr(day.startTime) && get24Hr(curr_time) < get24Hr(day.endTime)) {
        document.querySelector('#alert-success').onclick = function() {
            // online ordering available blah blah
        };
    }
    else { // THE ELSE YOU WANT TO SQUEEZE IN
        document.querySelector('#alert-success').onclick = function() {
            // comeback tomorrow blah blah
        };
    }
}
else {
    // this day is not supported blah blah
}

Answer 2

你在每个代码块中重复同样的事情。如果你发现自己重新使用某些东西，那么就把它变成一个功能。

//Store our button event as a function instead of repeating it
function setupOrderAvailable() {
    document.querySelector('#alert-success').onclick = function() {
        $.sweetModal({
            content: '<h2>Online Ordering is Available!</h2>' +
                'Please click the button below to begin your online order.' +
                '<div class="sweet-modal-buttons"><a href="http://pizzospizzeria.hungerrush.com" target="_blank" class="button greenB">Start Order</a></div>',
            // icon: $.sweetModal.ICON_SUCCESS
        });
    };
}

function setupOrderNotAvailable() {
    document.querySelector('#alert-success').onclick = function() {
        $.sweetModal({
            content: '<h2>Online Ordering is Not Available</h2>' +
            'Online ordering will be available again tomorrow from 11:00am to 9:00pm',
            // icon: $.sweetModal.ICON_ERROR,
            buttons: [{
                label: 'Close',
                classes: 'redB'
            }]
        });
    }
};

//Store a flag to let us know if ordering is available or not
var orderingIsAvailable = false;

//Monday
if (curr_day == '1' && get24Hr(curr_time) > get24Hr(monStartTime) && get24Hr(curr_time) < get24Hr(monEndTime)) {
   orderingIsAvailable = true;

//Tuesday
} else if (curr_day == '2' && get24Hr(curr_time) > get24Hr(teuStartTime) && get24Hr(curr_time) < get24Hr(teuEndTime)) {
   orderingIsAvailable = true;

//Wednesday
} else if ...


//Call a function to setup our button depending on ordering availability
if (orderingIsAvailable) {
    setupOrderAvailable();
} else {
    setupOrderNotAvailable();
}

我在这里没有走完全程。您确定订购是否可用的方法可以更好，但这至少可以推动正确的方向，并且应该允许您添加您正在寻找的提醒。

如果jQuery中有条件，则为其他所有内容提供else条件

2 个答案: