CSS 或 JS - 从 html 中隐藏旧元素答案

【问题标题】：CSS or JS - Hide old elements from htmlCSS 或 JS - 从 html 中隐藏旧元素
【发布时间】：2020-05-21 13:57:45
【问题描述】：

我的 Ionic 4 项目的 html 文件中有一组段落：

<! –– page 1 ––>
<p *ngIf="x1">Text 1</p>
<p *ngIf="x2">Text 2</p>
<p *ngIf="x3">Text 3</p>

<! –– page 2 ––>
<p *ngIf="x4">Text 4</p>
<p *ngIf="x5">Text 5</p>
<p *ngIf="x6">Text 6</p>

<! –– page 3... ––>

我有一个公共计数器 = 0，从 0 开始计数 +1 点击。我通过 ngIf 控制上述段落，在 ts 中将它们设置为“true”（如果 counter = 4, x4=true）。

我想设置一个自动规则（CSS 或 ts）来限制网页上可见的段落数量（不将段落的 ngIf 设置为 false）。

条件及备注：所以当 x4 可见时，x1,x2,x3 不应该是可见的。考虑到页面规则，只能同时显示 3 个段落。此规则应适用于页面中所有定位的数字（例如，如果计数器 = 5，x5=true），只有 x4 和 x5 应该可见（x6 = false，而计数器没有到达）。

你的解决方案是什么？

【问题讨论】：

标签： javascript html css typescript ionic-framework

【解决方案1】：

让我们得到段落：

var paragraphs = document.querySelectorAll("p");

定义段落的限制：

var limit = 10; //You can change this value any time

让我们隐藏超出限制的段落：

for (let index = limit; index < paragraphs.length; index++) {
    paragraphs[index].style.display = "none";
}

【讨论】：