Question

我正在建立一个网站，我希望有一个图像，一旦单击该图像，将其替换为另一图像，然后再次单击，将其替换为第三图像，依此类推。

我为此编写了一个JavaScript函数。问题是我只能调出索引列表中的一项，而从不允许我单击几次以遍历所有索引项。

这是我到目前为止编写的代码：

public $incrementing = false;

在HTML function change (index) { var links = new Array(); links[0] = img/videoplace.jpg; links[1]="img/hiroshima.jpg"; var image = document.getElementById('social'); image.src = links[index]; } <div class="box box1"> <img class="textOverImage" src="img/beehive.jpg" alt="social logo" id="social" onclick= "change(0); change(1)" > </div>中书写只会使图像在第一次单击时被对应于<img class="textOverImage" src="img/beehive.jpg" alt="social logo" id="social" onclick= "change(0); change(1)">的图像替换。

非常感谢您能提供的任何帮助。

Answer 1

请改用Javascript正确地附加事件处理程序（内联处理程序通常被认为是较差的做法，并且很难管理）。然后，在Javascript中，您可以保留要显示的当前图像索引的持久变量。每次单击，增加索引，并显示适当的图像：

const links = [
  'img/beehive.jpg', // first image is already displayed when page is loaded
  'img/videoplace.jpg',
  'img/hiroshima.jpg'
];
let index = 0;
const img = document.querySelector('#social');
img.addEventListener('click', () => {
  index++;
  img.src = links[index];
});

请注意，一次声明所有数组通常比使用new Array()更好，而且比使用index++;并逐个分配索引更简洁。

如果要环绕显示的图像，以便在单击最后一个图像后再次显示第一个图像，然后使用模数。代替

index = (index + 1) % links.length;

做

str(mtcars[names[1]]) # shows the str for mpg data frame
'data.frame':   32 obs. of  1 variable:
 $ mpg: num  21 21 22.8 21.4 18.7 18.1 14.3 24.4 22.8 19.2 ...

str(mtcars[names[-1]])
'data.frame':   32 obs. of  10 variables:
 $ cyl : num  6 6 4 6 8 6 8 4 4 6 ...
 $ disp: num  160 160 108 258 360 ...
 $ hp  : num  110 110 93 110 175 105 245 62 95 123 ...
 $ drat: num  3.9 3.9 3.85 3.08 3.15 2.76 3.21 3.69 3.92 3.92 ...
 $ wt  : num  2.62 2.88 2.32 3.21 3.44 ...
 $ qsec: num  16.5 17 18.6 19.4 17 ...
 $ vs  : num  0 0 1 1 0 1 0 1 1 1 ...
 $ am  : num  1 1 1 0 0 0 0 0 0 0 ...
 $ gear: num  4 4 4 3 3 3 3 4 4 4 ...
 $ carb: num  4 4 1 1 2 1 4 2 2 4 ...

Onclick事件-多次点击

1 个答案: