Могу ли я использовать LESS, чтобы дать элементам класс? - PullRequest
Новая
       5

Могу ли я использовать LESS, чтобы дать элементам класс?

0 голосов
/ 05 ноября 2018

У меня есть таблица, которая выглядела так: 

<table class="table">
    <thead>
        <tr>
            <th>Col_1</th>
            <th>Col_2</th>
            <th>Level</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value_1_1</td>
            <td>Value_1_2</td>
            <td>Success</td>
        </tr>
        <tr>
            <td>Value_2_1</td>
            <td>Value_2_2</td>
            <td>Error</td>
        </tr>
    </tbody>
</table>

Класс table происходит от начальной загрузки. У меня есть фрагмент JavaScript, который проходит через строки и применяет класс danger (также из начальной загрузки) ко всем строкам, содержащим текст ошибки. 

$(document).ready(function () {
    $("tr td:contains('Error')").parent().addClass("danger");
});

Это все работало нормально. Таблица была стилизована под загрузочную таблицу, а строки, содержащие сообщения об ошибках, были оформлены правильно.

Затем я добавил еще одну таблицу на свой сайт. Я начал понимать, что повторяюсь во многих местах, поэтому я консолидировался. Я удалил класс из таблицы и вместо этого объявил его в меньшем файле, например: 

@import "bootstrap/index";

table {
    .table();
}

После этого изменения мои таблицы остаются в стиле загрузочных таблиц, но уже не имеют фактического класса table. Это означает, что мои строки ошибок больше не обрабатываются правильно. Таблица стилей Bootstrap специально ищет .table > tbody > tr > td.danger, но у моего table больше нет класса table.

Каков наилучший способ заставить мой стол действительно иметь класс table?

Я знаю, что могу динамически добавлять классы к элементам через JavaScript (как показано выше), но есть и обратная сторона: когда контент добавляется на страницу, мне приходится снова вызывать скрипт. На самом деле я хочу избавиться от приведенного выше фрагмента JavaScript и заменить его чем-то, что лучше работает для динамического содержимого (например, журнал ошибок, который обновляется в реальном времени без обновления страницы с помощью SignalR).

...