Question

单击按钮时如何更改按钮的图像？

我有一个按钮，早期我希望它带有一个图标，但是当我单击它时（活动），图标被另一个替换。

我该怎么做？

<!-- image1 -->
<a><img src='https://svgshare.com/i/Gwo.svg' title='' /></a>

<p></p>

<!-- image2 -->
<a style="display:none"><img src='https://svgshare.com/i/Gw7.svg' title='' /></a>

Answer 1

您可以执行以下操作：

TS文件

export class AppComponent  {
  name = 'Angular';
  value = 'https://svgshare.com/i/Gwo.svg'; //default_value

  updateImage() {
    this.value = 'https://svgshare.com/i/Gw7.svg';
  }
}

HTML文件

<a><img [src]="value" title='' (click)='updateImage()' /></a>

您还可以在每次单击按钮时更新图像，而不仅是第一次使用这样的属性状态：

export class AppComponent  {
  name = 'Angular';
  value = 'https://svgshare.com/i/Gwo.svg'; //default_value
  status = false;


  updateImage() {
    this.status = !this.status;
    if (this.status) //active status
     this.value = 'https://svgshare.com/i/Gw7.svg';
    else this.value = 'https://svgshare.com/i/Gwo.svg';
  }

}

希望有帮助！

Answer 2

您可以只使用一行：

<a><img 
    [src]="toggle ? 'https://svgshare.com/i/Gwo.svg' : 'https://svgshare.com/i/Gw7.svg'" 
    title='' 
    (click)='toggle = !toggle'/>
</a>

Answer 3

您可以在单击时更新svg属性以及交换图像。

例如，如果您拥有

# include all files from the config directory
#
!includedir /etc/my.cnf.d

[mysqld]
max_connections = 4096
key_buffer_size = 512M
max_allowed_packet = 1024M
query_cache_limit = 256M
query_cache_size = 5G
query_cache_type = 1
innodb_log_file_size=1G
innodb_buffer_pool_size=8G
max_heap_table_size=2G
join_buffer_size=32G
tmp_table_size=2G
thread_cache_size=512

您可以使用js通过函数来更新填充，笔触宽度，不透明度等。

 <svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
   <circle id="circle1" onclick='changerect(evt)' r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2" />
 </svg>

如果您希望在单击时交换图像，则可以使用常规交换图像，如上面ic_paty所述。

更改按钮点击图像

3 个答案: