不同容器如何使用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()">&nbsp; image&nbsp; data&nbsp; data&nbsp; <br>&nbsp; <br>&nbsp; <div class="xyz" [hidden]="boxHide">&nbsp; &nbsp; <hr>&nbsp; &nbsp; hidden. <button (click)="clickButton()">click me</button>&nbsp; </div>&nbsp; <div class="xyz1" [hidden]="hideDetails">&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li>one</li>&nbsp; &nbsp; &nbsp; <li>two</li>&nbsp; &nbsp; &nbsp; <li>three</li>&nbsp; &nbsp; &nbsp; <li>four</li>&nbsp; &nbsp; &nbsp; <li>five</li>&nbsp; &nbsp; </ul>&nbsp; </div></div>您可以使用数组和索引或根据可以传递给每个重复容器的唯一 ID 修改逻辑，但这打破了可重用代码和 Angular 作为框架的概念

Answer 2

您可以使用数组来存储框的状态，例如public boxHide: boolean[] = [];public clickButton(index) {&nbsp; &nbsp; this.boxHide[index] = false;}在模板中：<div class="container" (mouseenter)="boxHide[3]=false" ...&nbsp; &nbsp; <div class="xyz" [hidden]="boxHide[3]">&nbsp; &nbsp; &nbsp; &nbsp; <button (click)="clickButton(3)">click me</button>然后用单独的数字索引你所有的盒子等。