影响CSS规则的JavaScript/jQuery函数

我正在尝试编写基于表数据生成网格的函数。该函数可以工作，但由于某些原因，这些类不会导致样式更改。我的函数如下所示：

$(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);
    }
}

我认为我的代码的问题在于试图将类和鼠标单击侦听器添加到for循环内部创建的临时对象。以下是SSCCE：

---

这是否意味着在单元格添加到表div之后，我必须定义for循环之外的所有内容？如果是，原因是什么？

问题在于css规则是按选择器的特定性排序的

您的类本身不够具体，无法排名高于用于设置背景的默认规则。这可以很容易地在浏览器开发工具css检查器中检查任何元素，并且影响元素的规则将按其排名顺序显示

试一试

---

有用的文章

成功了！现在，我等待机会“接受”这个！确保你阅读了Charlie在回答中提到的那篇有用的文章——这篇文章包含了更多你可以用来解决问题的有用信息，比如使用

！重要信息

.hourMark
{
    border-right: 2px solid #000;
}

.available
{
    background: #0f0;
}

#availabilitySchedule .available
{
    background: red;
}