Question

我有一个问题-如何动态更改分配给按钮的功能？用户选择一个选项后，我想更改按钮中的功能。现在，我使用if，但是我通过更改可见性来重复自己的代码。我可以只设置一次“ question2”按钮，并动态更改它们的功能吗？

我尝试过：

document.getElementById("id").setAttribute("click", "select(darkred)");
document.getElementById("id").setAttribute("onclick", "select(darkred)");
document.getElementById("id").setAttribute("(click)", "select(darkred)");

但是他们没有用。

<div name="question1">
  <button (click)="select('red')">Select Red</button>
  <button (click)="select('green')">Select Green</button>
</div>

<!-- The result of answer will change function which is assigned to next buttons -->

<div name="question2" [hidden]="isRed">
  <button (click)="select('lightred')">Select Light</button>
  <button (click)="select('darkred')">Select Dark</button>
</div>
<div name="question2" [hidden]="isGreen">
  <button (click)="select('lightgreen')">Select Light</button>
  <button (click)="select('darkgreen')">Select Dark</button>
</div>

App.component.ts：

export class AppComponent implements OnInit {
  isRed = true;
  isGreen = true;

  select(color: string) {
    if (color === 'red') {
      isRed = false;
      isGreen = true;
    }
    if (color === 'green') {
      isRed = true;
      isGreen = false;
    }
  }

Answer 1

我建议以下内容：

<div name="question1">
  <button (click)="selectBaseColor('red')">Select Red</button>
  <button (click)="selectBaseColor('green')">Select Green</button>
</div>

<!-- The result of answer will change function which is assigned to next buttons -->

<div name="question2">
  <button (click)="selectBrightness('light')">Select Light</button>
  <button (click)="selectBrightness('dark')">Select Dark</button>
</div>

App.component.ts：

export class AppComponent implements OnInit {
  selectedBaseColor = null;
  selectedBrightness = null;

  selectBaseColor(color: string) {
    this.selectedBaseColor = color;
  }

  selectBrightness(brightness: string) {
    this.selectedBrightness = brightness;
  }

按照您的样式的替代方法，您无需更改函数，只需更改其参数即可：

<div name="question1">
  <button (click)="select('red')">Select Red</button>
  <button (click)="select('green')">Select Green</button>
</div>

<!-- The result of answer will change function which is assigned to next buttons -->

<div name="question2" [hidden]="isRed">
  <button (click)="select(isRed ? 'lightred' : 'lightgreen')">Select Light</button>
  <button (click)="select(isRed ? 'darkred' : 'darkgreen')">Select Dark</button>
</div>

如果颜色多于红色和绿色，则应将内联'if'放置在component.ts文件中。

Answer 2

我以这种方式解决了这个问题：

 <div name="question1">
  <button (click)="select('red')">Select Red</button>
  <button (click)="select('green')">Select Green</button>
</div>

<div name="question2">
  <button #button1 id="button1" (click)="select(button1.name)">Select Light</button>
  <button #button2 id="button2" (click)="select(button2.name)">Select Dark</button>
</div>

export class AppComponent implements OnInit {
  select(color: string) {
  switch(color){
    case "red":
      document.getElementById("button1").setAttribute("name", "lightred");
      document.getElementById("button2").setAttribute("name", "darkred");
    case "green":
      document.getElementById("button1").setAttribute("name", "lightgreen");
      document.getElementById("button2").setAttribute("name", "darkgreen");
        }
    }
}

如何进行动态点击事件

2 个答案: