不同容器如何使用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>

然后用单独的数字索引你所有的盒子等。