Question

我需要创建一个日历并让用户选择特定的小时数（比如微软的前景）我能够在某一天选择所有的div并改变它们的颜色，而不是特定的小时数（我在每个循环中加50）然后将它转换为30（半小时））。

这是我的代码：

  <div id="majorDiv"></div> //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);
            }
        }

如何选择特定的div /小时 - 如0450-> 0750。并选择更改divs颜色？

Answer 1

filter函数是jQuery是你正在寻找的。当常规选择器无法正常工作时，它可以进行更高级的过滤。其他一些想法：

1）id必须以字母开头（不是你的情况下的数字）

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

我没有测试运行此代码，因此可能会有一些改进。它假定您已在属性“data-hour”中设置小时。也可以使用data()来使其更加流畅。您还需要在开始时修改选择器以选择所有小时div。

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" );

改进代码的另一个建议是使用数组并推入新的html。最后，你将他们加在一起。这样做是为了避免字符串连接。

Answer 2

工作示例http://jsfiddle.net/s9z8A/2/我在星期一列中选择了一些小时，如您所见 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" );
}

HTML

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

如何在其他div中选择特定的多个div并改变它们的颜色

2 个答案: