文章/答案/技术大牛

发布

社区首页 >问答首页 >更改css类的角访问DOM兄弟元素

问更改css类的角访问DOM兄弟元素
EN

Stack Overflow用户

提问于 2021-05-23 07:16:48

回答 1查看 194关注 0票数 0

如何从集合上的ngFor迭代中访问按钮中相应的同级元素？

Dom元素，我试图访问这个DOM元素，这样我就可以修改同级元素div.popup类。如在文章底部链接的Codepen示例所示。

我是新来的有角的，请告诉我。

      <button
        #popBtn
        href="#"
        id="info"
        class="info popup-trigger"
        title="info"
        (click)="PopUp($event)"
      >
        Popup
      </button>

在此之前，我阅读了以下文章，但我无法完全理解或与之相关。

Pass a reference to DOM object with ng-click

how to get DOM element with ng-click

How to get the element html clicked in a ngFor to add a css class?

代码概述

Component.html

<section class="ArticlesGrid">
  <div *ngFor="let article of articles" class="windowsBox">
    <article class="ui-titlebar">
      <h4 class="ui-titletext">{{article.title}}</h4>
    </article>
    <div class="windowsScreen">
      <button
        #popBtn
        href="#"
        id="info"
        class="info popup-trigger"
        title="info"
        (click)="PopUp($event)"
      >
        Popup
      </button>

      <div class="popup" role="alert">
        <div class="popup-container">
          <a href="#" class="popup-close img-replace">Close</a>
          <p>{{article.content}}}</p>
        </div>
      </div>
    </div>
    <p class="windowsTech">
      Technologies:
      <span class="THtml"></span>
      <span class="TCss"></span>
      <span class="TJs"></span>
    </p>
  </div>
</section>

Component.ts

  PopUp(event: Event) {
    //console.log(this.viewBtn.nativeElement.nextElementSibling.classList.toggle("is-visible"));
    console.log(event);
    // this.viewBtn.nativeElement.
  }

SandBox模型

https://stackblitz.com/edit/angular-collection-popup?file=src/app/app.component.html

镜像功能

https://codepen.io/Gugiui/pen/vweXYR

谢谢你读我的问题。我希望你能给我建议/指导

javascript

html

css

angular

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-23 07:38:59

在弹出div上添加模板引用变量-

<div class="popup" role="alert" #popupDiv>

把它传递到按钮中，点击函数-

(click)="PopUp($event, popupDiv)"

使用普通javascript更改PopUp方法中的类-

PopUp(event: Event, element) {

    element.classList.remove('popup');
    element.classList.add('test');
    console.log(element.classList);
  }

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67657158

复制

相似问题

问更改css类的角访问DOM兄弟元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改css类的角访问DOM兄弟元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改css类的角访问DOM兄弟元素
EN