Как избежать использования JavaScript с селектором атрибутов CSS - PullRequest
Новая
       18

Как избежать использования JavaScript с селектором атрибутов CSS

4 голосов
/ 11 ноября 2011

Я пытаюсь скрыть последующие tr с role = "metadata" и тем же идентификатором группы данных, что и первый встречающийся tr.

Я не могу использовать JavaScript здесь, и я пытаюсь достичь этого с помощью чистогоCSS. 

<table>
    <tbody>
        <!-- BEGIN this tr should be visible -->
        <tr data-group-id="1" role="metadata">
            <td>
                First rows group title
            </td>
        </tr>
        <!-- END this tr should be visible -->
        <tr data-group-id="1" role="data">
            <td>
                Row belonging to group 1
            </td>
        </tr>
        <!-- BEGIN this tr should be hidden -->
        <tr data-group-id="1" role="metadata">
            <td>
                Rows group title
            </td>
        </tr>
        <!-- END this tr should be hidden -->
        <tr data-group-id="1" role="data">
            <td>
                Another row belonging to group 1
            </td>
        </tr>
        <!-- BEGIN this tr should be visible -->
        <tr data-group-id="2" role="metadata">
            <td>
                Second rows group title
            </td>
        </tr>
        <!-- END this tr should be visible -->
        <tr data-group-id="2" role="data">
            <td>
                Row belonging to group 2
            </td>
        </tr>
    </tbody>
</table>

Подобные селекторы ... 

[data-group-id="1"][role~="metadata"] ~ [data-group-id="1"][role~="metadata"]
    display: none

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

Что-то вроде этого было бы идеально (я знаю, что это неверный код CSS, это просто моя фантазия с регулярными выражениями, чтобы помочь проиллюстрировать проблему): 

[data-group-id="(.*?)"][role~="metadata"] ~ [data-group-id="\\1"][role~="metadata"]

Есть ли способ, которым я могу добиться этого, используя только CSS?

Заранее спасибо.

1 Ответ

3 голосов
/ 11 ноября 2011

Мне кажется, что использование data-group-id в CSS нецелесообразно, тем более что он динамически изменяемый и условия, когда элемент скрыт или не изменяется.В итоге получается огромный кусок CSS, который невозможно поддерживать.

При первоначальном рендеринге, возможно, было бы лучше добавить className, чтобы вы определяли серверную часть, должно ли отображаться начальное состояние или нет. 

<tr data-group-id="1" role="data" class="hidden">
    <td>Another row belonging to group 1</td>
</tr>

Я предполагаю, что JavaScript используется для динамического изменения data-group-id, поэтому почему бы не использовать JavaScript для добавления / удаления className «скрытого», когда и где это имеет смысл.По крайней мере, в JavaScript вы МОЖЕТЕ использовать регулярные выражения;)

Когда вы дошли до того, что вам нужно написать невыполнимые, подверженные ошибкам и не поддерживаемые CSS-выражения, вы делаете что-то не так.

Вам все равно придется написать какой-то код, чтобы добиться этого, с тем же успехом можно сделать это чистым способом, а не пытаться вставить его в язык стилей, который не подходит для этой работы.

...