影响 CSS 规则的 JavaScript/jQuery 函数
JavaScript/jQuery function affecting CSS rules
我正在尝试编写基于表数据生成网格的函数。该函数有效,但由于某种原因,类不会导致样式更改。我的函数看起来像:
$(document).ready(function()
{
// create 9:00 and 9:30 cells for both employees
generateAvailabilityGrid($("#oneDay"), 30, 9, 10);
});
/* NOTE: This function works as expected. I have tested it */
// function that generates the availability grid for availabilitySchedule
// parameters: ID of container to write availability grid to (or index), size of interval block (in minutes, as integer), (optional) start time, (optional) end time
function generateAvailabilityGrid(identifier, intervalSize, floatStartTime, floatEndTime)
{
// for good measure, define floatStartTime,floatEndTime as 9 AM,9 PM, respectively
floatStartTime = floatStartTime || 9;
floatEndTime = floatEndTime || 21;
// enforce intervalSize to be greater than 10
if (intervalSize < 10) return;
// enforce floatSize,floatEndTime to be between 0 and 23.99
if (((floatStartTime < 0) || (floatStartTime >= 24)) || ((floatEndTime <= 0) || (floatEndTime >= 24))) return;
// create container div element (will serve as availabilityTable)
var tableDiv = $('<div class="table"></div>');
// create dummy row div, dummy cell div
var dummyRowDiv = $('<div class="tableRow"></div>'),
dummyCellDiv = $('<div class="tableCell"></div>');
// get names from #employeeTable
var names = $('#employeeTable tr:not(#titleRow)').map(function() { return $(this).children(':lt(2)').map(function() { return $(this).children('input').val(); }).get().join(" "); });
// for every name in names
$(names).each(
function()
{
// copy dummy row and append label with name to it
var row = $(dummyRowDiv).clone();
row.append($("<label></label>").text(this));
for (var m = floatStartTime * 60; m < floatEndTime * 60; m += intervalSize)
{
// create cells
var tempCell = $(dummyCellDiv).clone();
if ((m % 60 == 0) && (m > floatStartTime))
{
$(tempCell).addClass('hourMark');
}
// have cell, on click, be marked 'available'
$(tempCell).click(function() { $(this).toggleClass('available'); });
// TODO: fetch data and use it to "fill" appropriate cells
// append cells to row
$(row).append(tempCell);
}
// append row to container div
$(tableDiv).append(row);
});
// determine if identifier is int
var isIntIdentifier = (identifier > -1);
// append tableDiv to div identified by identifier
// if identifier is int
if (isIntIdentifier)
{
// use index to get container to append tableDiv to and append
$('#availabilitySchedule :nth-child(' + (identifier + 1) + ')').append(tableDiv);
}
else
{
// get container to append tableDiv to by name and append
$(identifier).append(tableDiv);
}
}
被"删除"的 CSS 规则是:
.hourMark
{
border-right: 2px solid #000;
}
.available
{
background: #0f0;
}
我认为我的代码的问题是尝试将类和鼠标单击侦听器添加到在 for 循环中创建的临时对象。这是SSCCE:https://jsfiddle.net/b73fo0z5/
这是否意味着在将单元格添加到表div 之后,我将不得不定义 for 循环之外的所有内容?如果是这样,为什么?
问题是 css 规则是按选择器特异性排名
的您的类本身不够具体,无法排名高于用于设置背景的默认规则。这可以很容易地在浏览器开发工具CSS检查器中检查任何元素,并且影响元素的规则将按其排名顺序显示
尝试
#availabilitySchedule .available
{
background: red;
}
有用的文章 https://css-tricks.com/specifics-on-css-specificity/
相关文章:
- 是否有一个JS/jQuery函数可以获取某个类的每个元素的ID
- 如何在JQuery函数中定义一个值,然后调用另一个函数并使用该值
- 如何从jquery函数返回变量
- 如何将具有文本类型值的var放入jQuery函数中
- Jquery函数在错误的时间提交
- 锚链接无法使用.slideUp jquery函数
- 重新分解jQuery函数
- 如何在视图模型contet更新更新上调用Jquery函数
- 如何向这个javascript/jquery函数添加参数
- 添加类来触发jquery函数
- 更改智能表中的页面将停止JQuery函数的工作
- 使用每500ms运行一次的jquery函数是个好主意吗
- jQuery函数不能只在一个页面上工作
- 如何将jquery函数链接到vanilla选择器
- 仅在小型设备上调用jQuery函数
- 如何将jquery函数仅应用于大屏幕
- 奇怪的jquery函数行为
- Backbone listenTo不将jquery函数作为处理程序进行激发
- 在jquery函数内部设置来自jquery函数的var;t运行
- 从Jquery函数中获取一个变量