如何以角度选择多个dom元素？答案

【问题标题】：How to select multiple dom elements in angular?如何以角度选择多个dom元素？
【发布时间】：2023-01-30 04:00:14
【问题描述】：

<div class="modalmenu"  >
  <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#in">HOME</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#ab">SOBRE MI</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#his">HISTORIA</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#ex">EXPERIENCIA</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#cont">CONTACTO</a></div>
  <div class="sep" #sepinout></div>
</div>

export class NavBarComponent {
  sepin(sepinout: HTMLElement){
    sepinout.style.translate = "0px"
  }

  sepout(sepinout: HTMLElement){
    sepinout.style.translate = "-2000px"
  }
}

选择器标签#sepinout 只选择一个元素，不知道如何同时选择几个，对list的所有元素都实现这个功能

我尝试使用相同的选择器，但它似乎不起作用，因为该操作只发生在一个元素上

【问题讨论】：

标签： angular typescript dom

【解决方案1】：

您可以使用 document.querySelectorAll('.sep') 选择所有具有“sep”类的元素。

export class NavBarComponent {
  sepin() {
    const sepinout = document.querySelectorAll('.sep');
    sepinout.forEach(el => {
        el.style.transform = "translate(0px)";
    });
  }

  sepout() {
    const sepinout = document.querySelectorAll('.sep');
    sepinout.forEach(el => {
        el.style.transform = "translate(-2000px)";
    });
  }
}

希望对您有所帮助，如果有帮助，请投赞成票并将问题标记为已解决，谢谢

【讨论】：

【解决方案2】：

您可以使用 ViewChildren 获取 html 的所有元素

<div class="modalmenu">
  <div class="modal_itm" (mouseenter)="sepin()" (mouseleave)="sepout()"><a href="#in">HOME</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin()" (mouseleave)="sepout()"><a href="#ab">SOBRE MI</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin()" (mouseleave)="sepout()"><a href="#his">HISTORIA</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin()" (mouseleave)="sepout()"><a href="#ex">EXPERIENCIA</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin()" (mouseleave)="sepout()"><a href="#cont">CONTACTO</a></div>
  <div class="sep" #sepinout></div>
</div>

打字稿

  @ViewChildren('sepinout') sepinouts!: QueryList<any>;

  sepout() {
    this.translateElements('0');
  }

  sepin() {
    this.translateElements('-2000px');
  }

  translateElements(translate: string) {
    this.sepinouts.toArray().forEach((item: any) => {
      item.nativeElement.style.translate = translate;
    });
  }

我希望它能帮助你

【讨论】：

【解决方案3】：

我能实现的最好和最简单的解决方案：

<div class="modalmenu">
  <span class="material-symbols-outlined nbcont_x">close</span>
  <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#in">HOME</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin(sepinout1)" (mouseleave)="sepout(sepinout1)"><a href="#ab">SOBRE MI</a></div>
  <div class="sep" #sepinout1></div>
  <div class="modal_itm" (mouseenter)="sepin(sepinout2)" (mouseleave)="sepout(sepinout2)"><a href="#his">HISTORIA</a></div>
  <div class="sep" #sepinout2></div>
  <div class="modal_itm" (mouseenter)="sepin(sepinout3)" (mouseleave)="sepout(sepinout3)"><a href="#ex">EXPERIENCIA</a></div>
  <div class="sep" #sepinout3></div>
  <div class="modal_itm" (mouseenter)="sepin(sepinout4)" (mouseleave)="sepout(sepinout4)"><a href="#cont">CONTACTO</a></div>
  <div class="sep" #sepinout4></div>
</div>

export class NavBarComponent {
  sepin(sepinout: HTMLElement){
    sepinout.style.translate = "0px"
  }

  sepout(sepinout: HTMLElement){
    sepinout.style.translate = "-2000px"
  }
}

【讨论】：