Question

我正在开发一个日历交互模块。日历显示保留的天数。预订间隔为7天。我已经通过javascript设置了一天徘徊添加一个类并且在这一天之前和之后的3天自动徘徊，以便可视化那里的7天间隔设置。现在我坚持以下问题。

如果我徘徊一天和一个上一个。 3或接下来的3已经是预订的一部分我希望将差异添加到7天间隔的另一端。一个例子：

我徘徊在第12天
然后间隔看起来像xxx12xxx
我将光标移动到13
间隔看起来像xxx13xxx
如果我现在将光标移动到14，那么15,16,17也会被标记，但如果16是预订的起点怎么办？然后它看起来像xxx14x
在任何一种情况下，我最终都需要知道左外端和右外端的id，因为这些是我必须通过表单发送的值。如何获得这些？
如何让差异（16和17）在左端前置，这样看起来像xxxxx14x？

我认为它有一个7个案例切换与巨大的代码块的唯一方法。但不知怎的，我觉得有一种更简单的方法。

非常感谢提前阅读！

问候

Answer 1

当你悬停一天时，你显然需要对周围的日子做一些分析才能完成你的任务。这是我如何处理这个（伪代码）：

on day hover{
    determine the base starting date.
    start day = current day.value - 3
    end day = start day + 7

    There's several scenerios to deal with:
        all seven days are available.
        some days between the start day and the current day are reserved, but enough are availabel after the end day to allow for choosing 7 days
        some days between the current day and the end day are reserved, but enough are available before the start day to allow for selecting 7 days
        There some days are reserved between both the start day and current day as well as the curent day and end day (in which case, no selection can be made).

    So, you need to determine which case you're dealing with and adjust the 7 day span accordingly.

    set a boolean to handle checking logic.
    hasSevenDayAvailablility = true

    test the first instance.
    iterate over each day and see if any are currently reserved.
    for(start day to end day as day){
        if(day is reserved){
            hasSevenDayAvailability = false
        }
    }

    At this point, you know whether or not you even need to modify the seven day window.
    if(!hasSevenDayAvailability){
        Check for no availability first (as this is the easiest to check)  Since the only reservation options are in blocks of 7, we only have to check the start day and end day.
        if(start day is reserved && end day is reserved){
            a reservation window is unavailable, so do nothing.
        } else {
            if(the start day is reserved){
                increment the start day until you reach the current day and test for 7 day availability window
                for(start day to current day as day){
                    if(day is available && day + 7 is available){
                        start day = day
                        end day = start day + 7
                        hasSevenDayAvailability = true
                        break
                    }
                }
            } else {
                decrement the end day until you reach the current day and test for 7 day availability window
                for(end day to current day step -1 as day){
                    if(day is available && day - 7 is available){
                        start day = day - 7
                        end day = day
                        hasSevenDayAvailability = true
                        break
                    }
                }
            }
        }
    }

    Finally, if there is a seven day availability window, use the calculated start and end days to set classes as needed.
    if(hasSevenDayAvailability){
        for(start day to end day as day){
            day.addClass(highlighted)
        }
    }
}

需要通过jQuery进行某种碰撞检测的帮助

1 个答案: