[英]how to select specific multiple divs inside other div and change their color
I need to create a calender and let the user choose specific hours (like microsoft outlook) I able to choose all the divs under a certain day and change their color, but not the specific hours, (I add 50 in every loop and later will convert it to 30 (half hour)). 我需要创建一个日历并让用户选择特定的小时数(例如Microsoft Outlook),我可以选择特定日期下的所有div并更改其颜色,但不能更改特定的小时数(我在每个循环中添加50,以后会将其转换为30(半小时))。
This is my code : 这是我的代码:
<div id="majorDiv"></div> //html
javascript 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);
}
}
How to choose specific divs/ hours like - 0450->0750. 如何选择特定的div /小时,例如-0450-> 0750。 and by choosing changing the divs color?
并选择更改divs颜色?
The filter
function is jQuery is the one you are looking for. filter
功能是jQuery,您正在寻找它。 It makes it possible to do more advanced filtering when the regular selectors doesn't work out for you. 当常规选择器不适合您时,可以进行更高级的过滤。 Some other thoughts:
其他一些想法:
1) The id must start with a letter (not a number as in your case) 1)ID必须以字母开头(而不是您所用的数字)
2) Set the hour in an attribute instead, eg data-hour. 2)改为在属性中设置小时,例如data-hour。
Havn't test run this code so there might be some improvements. 没有测试运行此代码,因此可能会有一些改进。 It presumes you have set the hour in the attribute "data-hour".
假设您已经在属性“ data-hour”中设置了小时。 Could also be done with
data()
to make it slicker. 也可以使用
data()
使其更光滑。 Also you need to modify the selector at the start to select all the hour divs. 另外,您还需要在开始时修改选择器以选择所有小时格。
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" );
Another suggestion for improvement to your code would be to use an array and push in new html. 另一个改进代码的建议是使用数组并推入新的html。 At the end you join them together.
最后,您将他们聚在一起。 This is done to avoid the string concatination.
这样做是为了避免字符串混淆。
working example http://jsfiddle.net/s9z8A/2/ I select some hours in Monday column as you can see in changeMonday function 工作示例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 html
<div id="majorDiv"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.