如何避免使用CSS属性选择器的JavaScript

2019-06-30 12:22:13 阅读：191 来源： 互联网

标签：javascript css css-selectors attributes

我试图用role =“metadata”和与第一个发生的tr相同的data-group-id隐藏后续的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

…工作得很好,除了data-group-id可能会动态变化.

像这样的东西是完美的(我知道这是无效的CSS代码,它只是我的幻想与正则表达式,以帮助说明问题)：

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

有没有什么办法可以用CSS来实现这个目的？

提前致谢.

解决方法:

在我看来,在CSS中使用data-group-id是不切实际的,特别是因为它是动态可变的,并且隐藏或不改变元素的条件.你最终得到了一大堆无法维护的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“hidden”.至少在JavaScript中你可以使用正则表达式;)

当你到达必须编写不可能的,冗长的,容易出错且不可维护的CSS表达式时,你做错了什么.

无论如何,你将不得不编写一些代码来实现这一点,不妨尝试将它变成一种不适合工作的样式语言.

标签：javascript,css,css-selectors,attributes
来源： https://codeday.me/bug/20190630/1336484.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

如何避免使用CSS属性选择器的JavaScript