如果数据包含特定的文本，则隐藏元素？ [复制]

Posted 2023-03-06

【中文标题】如果数据包含特定的文本，则隐藏元素？ [复制]

【英文标题】：Hide element if data contains specific piece of text? [duplicate]

【发布时间】：2021-03-13 03:29:55

【问题描述】：

如果数据包含一段文本，是否有可能隐藏元素？

例如：隐藏数据包含“-en”的div

<div class="check" data-value="example-en"></div>
<div class="check" data-value="check-en"></div>
<div class="check" data-value="example2-en"></div>
<div class="check" data-value="check-fr"></div>

谢谢！

【问题讨论】：

在这种情况下可以使用 :contains 选择器来隐藏 div ！

我读到有人说在数据中你不能不使用:contains，你能举个例子吗？谢谢！

【参考方案1】：

您可以使用 css 或 javascript 来做到这一点。

CSS

[data-value*="-en"] 
  display: none;

如果你想基于类来做。

[class*="-en"] 
  display: none;

JS

document.querySelectorAll('[data-value*="-en"]').forEach((elem) => elem.style.display = 'none');

【讨论】：

是的，CSS 工作了 :) 非常感谢！还有一个问题， :not() 是否可以处理这个问题？ :not([data-value....) 可以工作吗？

使用:not() 可能有效，但您的选择器列表最终可能会很大，具体取决于您要排除的数量。

谢谢@aphextwix 最后一个问题（srry 大声笑），是否可以对课程做同样的事情？隐藏包含 -en 的类？例如： 隐藏那些它的类包含-en？谢谢老兄

@Vander - 我已经更新了我的答案以展示使用类的示例。

【参考方案2】：

您可以使用attribute selector

div[data-value*="-en"] 
  display: none;

<div class="check" data-value="check-en">1</div>
<div class="check" data-value="check-en">2</div>
<div class="check" data-value="check-fr">3</div>
<div class="check" data-value="check-fr">4</div>

【讨论】：

您好，杰拉德，感谢您的回复。问题是并非所有数据都是“检查”，还有其他名称和“-en”到最后......这可能是一个全球解决方案吗？谢谢