如何对不同的容器使用 java 脚本方法?

Question

我已经用一些方法制作了一个容器，当我单击并悬停在它上面时，这些方法可以起作用，问题是我有许多不同的容器需要相同的方法，但我不想为相同的工作创建很多方法。

<div class="container" (mouseenter)="boxHide=false" (mouseleave)="checkBox()">
image
data
data
<br>
<br>
<div class="xyz" [hidden]="boxHide">
<hr>
hidden. <button (click)="clickButton()">click me</button>
</div>
<div class="xyz1" [hidden]="hideDetails">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
</div>
<div class="container" (mouseenter)="boxHide=false" (mouseleave)="checkBox()">
image
data
data
<br>
<br>
<div class="xyz" [hidden]="boxHide">
<hr>
hidden. <button (click)="clickButton()">click me</button>
</div>
<div class="xyz1" [hidden]="hideDetails">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
</div>

boxHide = true;
hideDetails = true;
clickButton() {
this.hideDetails = !this.hideDetails;
this.boxHide = false;
}
checkBox() {
this.boxHide = true;
if (this.hideDetails) {
this.boxHide = true;
} else {
this.boxHide = false;
}
}

.container{
border: 1px solid black;
width: max-content;
}

现在，如果我将鼠标悬停在任何一个框上，两个框都会展开，但我希望唯一特定的一个展开。而且可以有很多盒子，所以我不想为同一个工作创建很多变量和函数。

Answer 1

最好的方法可能是用重用的逻辑制作组件。如果有多个"相同类型"的框，则将其抽象为子组件并在父组件中使用它。这就解决了问题。

<div class="container" (mouseenter)="boxHide=false" (mouseleave)="checkBox()">
image
data
data
<br>
<br>
<div class="xyz" [hidden]="boxHide">
<hr>
hidden. <button (click)="clickButton()">click me</button>
</div>
<div class="xyz1" [hidden]="hideDetails">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
</div>

您可以使用数组和索引，或者根据可以传递给每个重复容器的唯一 id 修改逻辑，但这破坏了可重用代码和 Angular 作为框架的概念

Answer 2

您可以使用数组来存储框的状态，例如

public boxHide: boolean[] = [];
public clickButton(index) {
this.boxHide[index] = false;
}

在模板中：

<div class="container" (mouseenter)="boxHide[3]=false" ...
<div class="xyz" [hidden]="boxHide[3]">
<button (click)="clickButton(3)">click me</button>

然后用单独的数字索引所有框等。