gpt4 book ai didi

javascript - 可以切换的图像网格,需要帮助保存选定的图像

转载 作者:行者123 更新时间:2023-11-28 05:01:07 25 4
gpt4 key购买 nike

我有一个可以切换的图像表。在每个单元格中,我可以在多个图像之间切换,如果我停止切换 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com