影响 CSS 规则的 JavaScript/jQuery 函数

Question

我正在尝试编写基于表格数据生成网格的函数。该函数有效，但出于某种原因，这些类不会导致样式更改。我的功能看起来像:

$(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 循环之外的所有内容？如果是，为什么？

Answer 1

问题是 css 规则是按选择器特异性排序的

您的类(class)本身不够具体，无法排在用于设置背景的默认规则之上。这可以在浏览器开发工具 css 检查器中轻松检查任何元素，影响元素的规则将按其排名顺序显示

尝试

#availabilitySchedule .available
{
    background: red;
}

有帮助的文章 https://css-tricks.com/specifics-on-css-specificity/