Question

我有一张可以切换的图像表。在每个单元格中，我可以在几个图像之间切换，如果我停止切换5秒钟，它将以某种方式持续存在（尚未确定，只是警告它）。

我遇到麻烦的地方是如果我在几个不同的单元格中点击一次（让我说我在5秒钟内在3个不同的单元格中点击一次。我只会获得1个已保存的警报而不是3个。有人帮我设计了吗？

该程序的想法是一个清单，用户可以切换单元格以显示任务的状态。像复选标记图像，问号图像等

欢迎其他设计建议。物体在这里会更好用吗？

<!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>

Answer 1

试试这个

    <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>

实际上，您正在调用具有相同变量（单击和计时器）的函数被覆盖。如果将这些变量放在click函数中，那么它们将为每个单击事件创建为新的

可以切换的图像网格，需要帮助保存所选图像

1 个答案: