Question

我想获取div元素的ID。获得的结果不一致，有时会正确获取ID，然后无法正确获取ID。我想检查获得的id的结果，看看它是否匹配2个字符串。

HTML

 <dl class="slidedeck">
              <div class="container">
                  <img src="../assets/images/pathologiessmall.jpeg" class="img" >
                  <div id ="specialites" class="overlay" (click)="setFormVisibility($event)">
                      <div class="text" >Par spécialité</div>
                    </div>
                  </div>           
          </dl>
          <dl class="slidedeck">
              <div class="container">

                  <img src="../assets/images/pathologiessmall.jpeg" class="img" >
                  <div id ="principesactifs" class="overlay" (click)="setFormVisibility($event)">
                      <div class="text" >Par spécialité</div>
                    </div>
                  </div>           
          </dl>

TypeScript

public setFormVisibility(event:any){
      var target = event.target || event.srcElement || event.currentTarget;
      var idAttr = target.attributes.id;
      this.showSpecialites = (idAttr ==="specialites") ? true : false;
      this.showPrincipesActifs = (idAttr ==="principesactifs") ? true : false;
      console.log(idAttr);
      console.log("Specialite",this.showSpecialites);
      console.log("PrincipesActifs",this.showPrincipesActifs);
    }

此外，尽管idAttr具有两个值之一，但我一直都在虚假。

Answer 1

当尝试打印event.target时，将获得以下输出，该输出存储在第一个event.target对象中。

<div _ngcontent-c24="" class="text">Par spécialité</div>

event.target的值不为null，因此idAttr用该值初始化。该对象没有 attributes.id 属性，因此该对象为null。然后，您尝试将字符串与null进行比较，这就是为什么比较结果始终返回false的原因。您可以通过以下方式获取id属性的值：

const idAttr = event.currentTarget.id;

由于字符串比较为您提供了布尔值，因此您也可以摆脱那些显式返回的true / false值。例如。 idAttr ===“ principesactifs”返回true或false。如果idAttr值将为null或未定义，Javascript会将该值隐式转换为common，因此结果您也将获得false。结果，您的方法可以如下所示：

public setFormVisibility(event:any){
  var idAttr = target.attributes.id;
  this.showSpecialites = (idAttr ==="specialites");
  this.showPrincipesActifs = (idAttr ==="principesactifs");
  console.log(idAttr);
  console.log("Specialite",this.showSpecialites);
  console.log("PrincipesActifs",this.showPrincipesActifs);
}

Typescript：从HTML中获取id元素并返回不稳定的结果

1 个答案: