JavaScript/jQuery 跟踪图像按钮点击次数答案

【问题标题】：JavaScript/jQuery Track Number of Image Button ClicksJavaScript/jQuery 跟踪图像按钮点击次数
【发布时间】：2011-09-21 16:30:25
【问题描述】：

抱歉这个新手问题，所以请耐心等待我；）我还在学习 JavaScript/jQuery。

我的目标是确保用户只点击一次图片按钮（避免由于重复提交表单而出现重复值）。

这是我要采取的方法：

由于按钮是图像，我不能在第一次单击按钮后禁用它。我可以隐藏图像按钮，但我认为这不是一个好主意，因为用户可能想知道按钮发生了什么。所以我想我可以在 JavaScript 中创建一个全局变量来跟踪用户点击按钮的次数跨重复的浏览器标签。

这是我的示例代码：

HTML

<html>
     <head><title>Global Variable Test 1</title></head>
     <body>
           <script type="text/javascript" src="clickCount.js"></script>
           <a href="#" onClick="countClicks();"><img src="arrow.gif" /></a>
     </body>
</html>

JavaScript

<!-- hide script from old browsers
  var counter = 0;
  function countClicks() {
        counter++;
        if(counter > 1)
       alert("Waah, stop clicking!");
        else
       alert('Number of clicks:' + counter);
  }
// end hiding script from old browsers -->

好吧，我可以计算一个页面上的点击次数，但如果我在同一页面上同时打开了两个选项卡，我似乎无法在下一页“共享”我的变量（即当我点击选项卡一上的图像按钮，然后在选项卡二中再次单击它，单击计数应为 2 而不是 1）。所以我的问题是：如何在 JavaScript 中创建一个可以跨浏览器标签共享的全局变量？有没有更好的方法来保证用户只能点击一次图片按钮？

任何帮助将不胜感激。

TIA。

【问题讨论】：

您可以通过localstorage分享数据。保存在一个标签中并在另一个标签中获取它
@ant_Ti 本地存储？你能稍微解释一下吗？谢谢。
try read this

标签： javascript jquery html

【解决方案1】：

我的目标是确保用户只点击一次图片按钮（避免由于重复提交表单而出现重复值）。

使用以下语句：

    $('#mybuttonid').one("click", function() {
      //my action on click here
    });

它只会触发一次点击事件

如何在 JavaScript 中创建一个可以跨浏览器选项卡共享的全局变量？

你不能。您可以改用 cookie。

【讨论】：

感谢您的快速回复。它不工作。请看jsfiddle.net/annelagang/szHgJ
是的，首先 - 你没有在左侧面板上选择 jQuery 框架，其次 - 这是我的示例中的错字：finction -> function。
是的，它有效！好把戏。但是如果我重复标签，警报仍然会在第二个标签上弹出。不过干得好。

【解决方案2】：

我认为更好的策略是禁用图像按钮，IMO。您可以将其显示禁用（淡出、无响应）但实际上不将其移除 - 即淡出一点并忽略后续点击。

例子：

$('#yourButton').click(function(e){
    $(this).fadeTo(0.5);
    $.get("someURL", {buttonClick:1});
    $(this).unbind().bind('click', function(e){
        e.preventDefault();  
    });
});

编辑：要创建全局变量 AFAIK，您不能跨浏览器选项卡执行此操作 - 相反，您应该将其存储在会话中。您可以使用一点 PHP 或其他方式来执行此操作，并在单击按钮时使用 AJAX 进行查询（请参阅修改后的示例）。

【讨论】：

我喜欢你的“淡出”形象创意。实际上，我正在为这个应用程序使用 ASP.NET。上面的示例只是一个测试代码，如果成功，我将转移到真实代码中。我使用 JavaScript/jQuery 的原因是为了避免服务器回发。顺便说一句，您的代码不起作用：'c jsfiddle.net/annelagang/KEqqH
啊，对不起。我的眼睛似乎跳过了您的 AJAX 建议部分。呵呵。将使用 AJAX 进行尝试。谢谢。
@AnneLagang 你需要在你的小提琴上将库设置为 jQuery :)
是的，想通了。大声笑谢谢。