Javascript 如何在其他div中选择特定的多个div并更改其颜色

我需要创建一个日历，让用户选择特定的时间（如microsoft outlook）。我可以选择某一天下的所有div并更改其颜色，但不能更改特定的时间（我在每个循环中添加50个，稍后将其转换为30个（半小时））

这是我的代码：

  <div id="majorDiv"></div> //html

//html

javascript

    var Days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var hakfHours = 48;
    var hours = "";



$(document).ready(function () {

        createCalendarDiv();
        var hh = "";
        $("#majorDiv").selectable({
            selected: function (event, ui) {
                hh = $(ui.selected.children);
                hh.css("background-color", "purple");

            }
        });

    });


        function createCalendarDiv() {
            var html = "";
            for (var i = 0; i < Days.length; i++) {
                html = "<div id='" + Days[i] + "' style='float:left;width:150px;background-    
color:pink'>" + Days[i];
                hours = 100;
                for (var k = 0; k < hakfHours; k++) {
                    html += "<div id='" + hours + "' rel='sub' style='background-color:yellow;width:150px;border:solid;border-color:greenyellow;border-width:2px'>" + hours + "</div>";
                    hours += 50;
                }
                html += "</div>";
                $("#majorDiv").append(html);
            }
        }

var-Days=[“周日”、“周一”、“周二”、“周三”、“周四”、“周五”、“周六”]；
var hakfHours=48；
var小时数=”；
$（文档）.ready（函数（）{
createCalendarDiv（）；
var hh=“”；
$（“#majorDiv”）。可选({
所选：功能（事件、用户界面）{
hh=$（ui.selected.children）；
css（“背景色”、“紫色”）；
}
});
});
函数createCalendarDiv（）{
var html=“”；
对于（变量i=0；i

---

如何选择特定的div/hours，如-0450->0750。通过选择更改divs颜色？

过滤功能是jQuery，这是您正在寻找的功能。当常规选择器不适合您时，它可以执行更高级的过滤。其他一些想法：

1） id必须以字母开头（而不是像您这样的数字）

2） 改为在属性中设置小时，例如数据小时

尚未测试运行此代码，因此可能会有一些改进。它假定您已经在属性“数据小时”中设置了小时。也可以使用

data（）

使其更光滑。您还需要在开始时修改选择器以选择所有小时刻度

var start = 450;
var end = 750;
$('#majorDiv hour-selector').filter(function(index) {
    var hour = parseInt(this.attr('data-hour'));
    return (hour >= start && hour <= end);
}).css( "background-color", "red" );

var start=450；
var-end=750；
$（“#majorDiv小时选择器”）.filter（函数（索引）{
var hour=parseInt（this.attr（'data-hour'））；
return（hour>=start&&hour工作示例我在星期一列中选择了一些小时，如中所示
changeMonday函数

    var Days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var hakfHours = 48;
    var hours = "";



$(document).ready(function () {

        createCalendarDiv();
        var hh = "";
        $("#majorDiv").selectable({
            selected: function (event, ui) {
                hh = $(ui.selected.children);
                hh.css("background-color", "purple");

            }
        });
changeMonday();
    });


        function createCalendarDiv() {
            var html = "";
            for (var i = 0; i < Days.length; i++) {
                html = "<div id='" + Days[i] + "' style='float:left;width:150px;background-color:pink'>" + Days[i];
                hours = 100;
                for (var k = 0; k < hakfHours; k++) {
                    html += "<div id='" + hours + "' rel='sub' style='background-color:yellow;width:150px;border:solid;border-color:greenyellow;border-width:2px'>" + hours + "</div>";
                    hours += 50;
                }
                html += "</div>";
                $("#majorDiv").append(html);
            }
        }

function changeMonday(){
    $('#Monday div').filter(function(index,elem) {
    var range = parseInt($(elem).attr('id'));
    return (range >= 550 && range <= 650);
}).css( "background-color", "green" );
}

var-Days=[“周日”、“周一”、“周二”、“周三”、“周四”、“周五”、“周六”]；
var hakfHours=48；
var小时数=”；
$（文档）.ready（函数（）{
createCalendarDiv（）；
var hh=“”；
$（“#majorDiv”）。可选({
所选：功能（事件、用户界面）{
hh=$（ui.selected.children）；
css（“背景色”、“紫色”）；
}
});
更改星期一（）；
});
函数createCalendarDiv（）{
var html=“”；
对于（变量i=0；ireturn（range>=550&&range这不是答案，但是为什么不使用Jquery插件呢？比如fullcalendar。
 <div id="majorDiv"></div>