如何仅显示一个具有相同 id 的元素

Question

这是我在堆栈溢出时的第一个问题

我只是想知道以下情况的简单解决方案

<div *ngFor="let d of w.event">
<div class="date" id="d.date" >
              <p>
                <span style="font-size:1.75em">{{d.date | date:'dd'}}</span>
                <br>
                <strong>&nbsp;{{d.date | date:'EEE'}}</strong>
              </p>
            </div>

循环的 div 可以有相同的 id 我只想显示具有特定日期的第一个 div 并忽略其余部分 这可以用 CSS 或 JavaScript 实现吗

Answer 1

您不能在两个元素上使用相同的id。这是对ids 的少数限制之一。

你可以使用一个类：

<div class="show">Yes</div> <div class="show">No</div>

...然后在获得匹配元素列表后使用索引 0 或索引 1 显示第一个或第二个：

var list = document.querySelectorAll(".show");
list[0].style.display = "none"; // Hides the first one
// or
list[1].style.display = "none"; // Hides the second one

其他一些想法：

1。您可以添加一个隐藏元素的类，而不是像我上面那样使用style.display。

2。您可以为元素使用单独的ids（或类），这样您就不需要索引，例如：

<div id="show-yes">Yes</div> <div id="show-no">No</div>

然后

document.getElementById("show-yes").style.display = "none";
// or
document.getElementById("show-no").style.display = "none";

---

根据我的经验，在所有浏览器上，您都可以使用 "[id=show] 之类的选择器对无效的 HTML 执行上述第一件事（使用 querySelectorAll），但不要。改为修复 HTML。

---

在您的问题更新中，您显示：

<div *ngFor="let d of w.event">
<div class="date" id="d.date" >
...

您说过您知道不能拥有多个具有相同id 的元素，那么为什么要编写代码呢？您可以轻松地给他们独特的ids：

<div *ngFor="let d of w.event; let i = index">
<div class="date" id="d.date{{i}}" >
...

Answer 2

首先，在 HTML 中，ID 是一个唯一的选择器，因此一个 ID 只能与一个元素相关联。如果你想实现你想要的功能，你必须为两个 DIV 分配不同的 id。并使用javascript隐藏和显示DIV

<div id="showYes">Yes</div> <div id="showNo">No</div>

Answer 3

如果您想一次显示一个，可以使用 *ngIf ，因为它一次只会显示一个

<div id="show" *ngIf='your_status'>Yes</div> 
<div id="show" *ngIf='!your_status'>No</div>

---

问题更新后，您可以创建只返回唯一日期的自定义过滤器，因此只会显示第一个唯一日期

// CREATE A PIPE FILTER :
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'checkUniqueDate'})
export class UniqueDatePipe implements PipeTransform {
  transform(dataArray) {
    let dates = [];
    return dataArray.filter(data => {
        return if(dates.indexOf(data.date) === -1) {
            dates.push(data.date);
            return true;
        } else {
            return false;
        }
    });
  }
}

// TEMPLATE SIDE :
<div *ngFor="let d of (w.event | checkUniqueDate )">

Answer 4

在课堂上也添加日期，然后你可以试试下面的代码

.YOUR_DATE{
    display:none
}
.YOUR_DATE:first-child{
    displany:inline
}