获取被点击的特定按钮的 ID。答案

【问题标题】：Get ID of the specific button that is clicked.获取被点击的特定按钮的 ID。
【发布时间】：2017-11-02 13:46:14
【问题描述】：

我有一个表格，表格内的一列包含一个按钮，每一行的按钮 ID 都不同。 id 使用 angular {{}} 进行数据绑定。在按钮元素上，我有一个名为 MarkasRead() 的函数，将在单击时调用。当我尝试为其检索 id 时，它显示未定义，我真的需要在函数调用中使用该 id 来做更多的工作。

列出的是表格代码和函数调用。

<table *ngIf="receivedMessages?.length > 0;else noReceivedMessages" class="table table-responsive table-bordered animated bounceIn" style="table-layout: fixed;width:100%; word-wrap:break-word;">
                  <thead>
                    <tr>
                      <th></th>
                      <th>From</th>
                      <th>Date</th>
                      <th>Subject</th>
                      <th></th>
                      <th></th>


                    </tr>
                  </thead>
                  <tbody *ngFor="let message of receivedMessages">
                    <tr *ngIf="message.mDeleted == '0' ">
                      <td><i style="color:red" class="fa fa-exclamation" aria-hidden="true"></i></td>
                      <td> {{message.messageFrom}}</td>
                      <td> {{message.createdDate}}</td>
                      <td> {{message.subject}}</td>
                      <td><a style="width:100%;background-color:tomato;color:white" [routerLink]="['/message/'+message.$key]" href="" class="btn">
                        <i class="fa fa-arrow-circle-o-right"></i> Details</a></td>
                      <td> <button id="{{message.$key}}" *ngIf="message.readStatus == '0'" type="submit" class="btn btn-success" (click)="MarkasRead()">Mark as Read</button>
                      </td>
                    </tr>

                  </tbody>
                </table>






MarkasRead(){

      alert(this.id); // or alert($(this).attr('id'));

  }

【问题讨论】：

'this' 在 MarkasRead() 函数中是类的上下文，而不是按钮。
get an element's id的可能重复

标签： javascript jquery angular typescript

【解决方案1】：

为此，您需要将 id 作为参数传递给 MarkasRead 函数作为 "MarkasRead(message.$key)"，然后将下面的函数定义为：

function MarkasRead(value)
{
  alert(value);
}

【讨论】：

最简单的方法谢谢。如果您查看我标记的其他答案，他们正在返回一个名为 elemId 的对象，所以当我打印它时说 id=xxx 但这样它只返回确切的值作为字符串。有什么区别？
这是因为如果您执行 MarkasRead(this)，那么它会将整个 button 对象作为参数，其中包含许多属性，其中 id 是一个属性

【解决方案2】：

你可以这样做。从按钮事件处理程序中传递 $event 对象

<button id="{{message.$key}}" *ngIf="message.readStatus == '0'" type="submit" class="btn btn-success" (click)="MarkasRead($event)">Mark as Read</button>

在组件中

MarkasRead(event) {
    var target = event.target || event.srcElement || event.currentTarget;
    var elemId = target.attributes.id;
  }

【讨论】：

当我执行 console.log(elemId) 时，它显示 id="xxxx" 我怎样才能返回字符串值？

【解决方案3】：

<button id="{{message.$key}}" *ngIf="message.readStatus == '0'" type="submit" class="btn btn-success" (click)="MarkasRead($event)">Mark as Read</button>


MarkasRead(event){

 var target = event.target || event.srcElement || event.currentTarget;
 var idAttr = target.attributes.id;
}

【讨论】：

这工作谢谢。我太愚蠢了 :) .. 可以解释 (click)="MarkasRead($event)" 部分。 $event 具体是什么意思？
@SabeehUlHaq 我很高兴它对您有用，请您批准我的回答，并且赞成票也很重要。

【解决方案4】：

你可以在MarkasRead函数处定义一个参数并传递this

function MarkasRead(el) {
  alert(el.id)
}

(click)="MarkasRead(this)"

【讨论】：

【解决方案5】：

尝试改变

(click)="MarkasRead()"

到

(click)="MarkasRead(event)"

以及使用函数

function MarkasRead(e) {
   alert(e.target.id);
}

【讨论】：

【解决方案6】：

<table *ngIf="receivedMessages?.length > 0;else noReceivedMessages" class="table table-responsive table-bordered animated bounceIn" style="table-layout: fixed;width:100%; word-wrap:break-word;">
              <thead>
                <tr>
                  <th></th>
                  <th>From</th>
                  <th>Date</th>
                  <th>Subject</th>
                  <th></th>
                  <th></th>


                </tr>
              </thead>
              <tbody *ngFor="let message of receivedMessages">
                <tr *ngIf="message.mDeleted == '0' ">
                  <td><i style="color:red" class="fa fa-exclamation" aria-hidden="true"></i></td>
                  <td> {{message.messageFrom}}</td>
                  <td> {{message.createdDate}}</td>
                  <td> {{message.subject}}</td>
                  <td><a style="width:100%;background-color:tomato;color:white" [routerLink]="['/message/'+message.$key]" href="" class="btn">
                    <i class="fa fa-arrow-circle-o-right"></i> Details</a></td>
                  <td> <button id="{{message.$key}}" *ngIf="message.readStatus == '0'" type="submit" class="btn btn-success" (click)="MarkasRead({message.$key)">Mark as Read</button>
                  </td>
                </tr>

              </tbody>
            </table>

MarkasRead(id) { 警报（ID） }

【讨论】：