我有一个可以切换的图像表。在每个单元格中，我可以在多个图像之间切换，如果我停止切换 5 秒，它将以某种方式持续存在(尚未确定，只是提醒它)。
我遇到的麻烦是，如果我在几个不同的单元格中单击一次(假设我在 5 秒内在 3 个不同的单元格中单击一次。我只会收到 1 个已保存的警报，而不是 3 个。有人可以帮助我设计吗？ ？
该程序的想法是一个 list ，用户可以切换单元格以显示任务状态。例如复选标记图像、问题图像等。
欢迎其他设计建议。对象在这里会工作得更好吗？
<!DOCTYPE html>
<html>
<head>
<title>Test 123</title>
<style type="text/css">
body {
background-color: teal;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<table border="1">
<tr>
<td><img class="imgX" src="pic0.png" alt="No Pic" /></td>
<td><img class="imgX" src="pic0.png" alt="No Pic" /></td>
</tr>
<tr>
<td><img class="imgX" src="pic0.png" alt="No Pic" /></td>
<td><img class="imgX" src="pic0.png" alt="No Pic" /></td>
</tr>
</table>
<script type="text/javascript">
$(function () {
var clicks = 0;
var timer;
$('.imgX').on('click', function () {
var fileName = $(this).attr('src');
var re = /(pic)(.*)(.png)/;
var imgNumber = fileName.match(re)[2]; //todo: why array
clicks = Number(imgNumber) + 1;
if (clicks > 3) clicks = 0;
var eleImage = $(this).attr('src', 'pic{0}.png'.replace('{0}', clicks));
//Save image if 5 seconds have passed
clearTimeout(timer);
timer = setTimeout(function () {
alert('saved');
}, 5000);
});
});
</script>
</body>
</html>
最佳答案
试试这个
<script type="text/javascript">
$(function () {
$('.imgX').on('click', function () {
var clicks = 0;
var timer;
var fileName = $(this).attr('src');
var re = /(pic)(.*)(.png)/;
var imgNumber = fileName.match(re)[2]; //todo: why array
clicks = Number(imgNumber) + 1;
if (clicks > 3) clicks = 0;
var eleImage = $(this).attr('src', 'pic{0}.png'.replace('{0}', clicks));
//Save image if 5 seconds have passed
clearTimeout(timer);
timer = setTimeout(function () {
alert('saved');
}, 5000);
});
});
</script>
实际上，您正在调用具有被覆盖的相同变量(点击和计时器)的函数。如果将这些变量放入点击函数中，那么它们将为每个点击事件创建为新变量
关于javascript - 可以切换的图像网格，需要帮助保存选定的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42127892/