Question

如何在加载不同图像的情况下实现按钮点击事件？

我想在一个div容器中显示不同的图像。如果我点击按钮＆＃34; changeImage＆＃34;它应该改变画面。

如何用dart语言实现这个？

更新：每次点击都应加载新图片。图像在一个文件中。

我是否用这样的按钮调用img？

    <input type="button" value="button" ng-click="img">

Answer 1

取决于我上面评论的答案，有不同的方法可以做到。

（未经测试）

import 'dart:async';

const NUM_IMAGES = 4;

main() {
  int curImg = 1;

  (querySelectorAll('img') as HtmlElement).forEach((img) {
    img.onClick.listen((e) {
    (querySelector('#img_${curImg % 4}') as HtmlElement).classes.add('hidden');
    curImg++;
    (querySelector('#img_${curImg % 4}') as HtmlElement).classes.remove('hidden');
  });
}

<style>
 img.hidden {
   display: none;
 }
</style>
<img id="img_1" src="a.gif" >
<img id="img_2" src="b.gif" class="hidden">
<img id="img_3" src="c.gif" class="hidden">
<img id="img_4" src="d.gif" class="hidden">

替代解决方案：

List<String> uris = ['/img/img_a.gif', '/img/img_b.gif', '/img/img_c.gif', '/img/img_d.gif'];

main() {
  int curImg = 0;
  (imgElement = querySelector('img') as ImageElement).onClick.listen((img) {
    curImg++;
    imgElement.src = uris[curImg];
  });
}

<img>

更改图像onclick-events

1 个答案: