Javascript 单击按钮时如何重置计数器_Javascript_Jquery

Javascript 单击按钮时如何重置计数器

javascript jquery

Javascript 单击按钮时如何重置计数器,javascript,jquery,Javascript,Jquery,我有一个计数器，如果第一次单击按钮，它会计数，如果第二次单击，它会减少计数器，我试图实现的是，如果我单击页面上的另一个按钮，它必须将计数器重置回其原始状态，这意味着它应该从第一次单击开始重新开始 var计数器=0；函数计数（）{ $（'通知'）.addClass（“通知”）； $（“#通知”）.html（计数器）；如果（$（'#重置'）。单击（函数（）{ $（'通知'）.removeClass（“通知”）； $（“#通知”）.empty（）；计数器=0； })); } $（'body'）

我有一个计数器，如果第一次单击按钮，它会计数，如果第二次单击，它会减少计数器，我试图实现的是，如果我单击页面上的另一个按钮，它必须将计数器重置回其原始状态，这意味着它应该从第一次单击开始重新开始

var计数器=0；
函数计数（）{
$（'通知'）.addClass（“通知”）；
$（“#通知”）.html（计数器）；
如果（$（'#重置'）。单击（函数（）{
$（'通知'）.removeClass（“通知”）；
$（“#通知”）.empty（）；
计数器=0；
}));
}
$（'body'）。在（'click'，'btn'，函数（e）上{
$（this.data（'increment'），！$（this.data（'increment'））；
如果（$（this）.data（'increment'））
计数器++；
其他的
计数器--；
计数（）；
});
。通知{
位置：绝对位置；
显示：块；
文本对齐：居中；
字体大小：9px；
字号：700；
字母间距：-1px；
宽度：自动；
最小宽度：8px；
高度：9px；
线高：4px；
填充物：5px；
边界半径：50%；
颜色：#fff；
盒影：1px 1px 5px#000；
边框：2倍实心#fff；
背景色：#b60000；
}

点击我
点击我
点击我
点击我




重置计数器
单击“重置”时，您希望将所有按钮的数据变量重置为true，这意味着下次单击时它们将增加。因此，在重置代码中添加以下内容：
$(this).data('increment', true);

目前，它们只是保持其以前的状态，因此如果它们最后一次递增，则会减少计数
编辑：
试试这个，它对我有用
<html>

<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        var counter = 0;
        $(document).ready(function() {
        function count() {
            $('#notify').addClass("notification");
            $("#notify").html(counter);
            if ($('#reset').click(function () {
                $('.btn').attr('data', true);
            $('#notify').removeClass("notification");
                        $("#notify").empty();
                    counter=0; // i tried to reset the counter here but it doesnt work

                    }));
        }



        $('.btn').click(function(e) {
            if ($(this).attr('data') == 'true') {
                counter++;
                $(this).attr('data', false);
            } else {
                counter--;
                $(this).attr('data', true);
            }
            //$(this).end();
            count();
        });
    });
    </script>
    <style>
        .notification {
            position: absolute;
            display: block;
            text-align: center;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: -1px;
            width: auto;
            min-width: 8px;
            height: 9px;
            line-height: 4px;
            padding: 5px;
            border-radius: 50%;
            color: #fff;
            box-shadow: 1px 1px 5px #000;
            border: 2px solid #fff;
            background-color: #b60000;
        }
    </style>

</head>
<body>
  <div class="marketoptionslist">
     <a><button class="btn" data=true>
        click me
    </button></a>
    <a><button class="btn" data=true>
    click me
    </button ></a>
    <a><button class="btn" data=true>
      click me
     </button></a>
    <a><button class="btn" data=true>
      click me
    </button></a>
 </div>

 <span id="notify" ></span>
</br>
</br>
<button id="reset"> Reset Counter</button>
</body>
</html>


var计数器=0；
$（文档）.ready（函数（）{
函数计数（）{
$（'通知'）.addClass（“通知”）；
$（“#通知”）.html（计数器）；
如果（$（'#重置'）。单击（函数（）{
$（'.btn'）.attr（'data'，true）；
$（'通知'）.removeClass（“通知”）；
$（“#通知”）.empty（）；
计数器=0；//我试图在此处重置计数器，但它不起作用
}));
}
$（'.btn'）。单击（函数（e）{
if（$（this）.attr（'data'）=='true'）{
计数器++；
$（this.attr（'data'，false）；
}否则{
计数器--；
$（this.attr（'data'，true）；
}
//$（this.end（）；
计数（）；
});
});
.通知{
位置：绝对位置；
显示：块；
文本对齐：居中；
字体大小：9px；
字号：700；
字母间距：-1px；
宽度：自动；
最小宽度：8px；
高度：9px；
线高：4px；
填充物：5px；
边界半径：50%；
颜色：#fff；
盒影：1px 1px 5px#000；
边框：2倍实心#fff；
背景色：#b60000；
}
点击我
点击我
点击我
点击我




复位计数器

请注意，我使用了下面答案中提到的attr（）方法。
这样设置数据属性实际上不会将数据增量
放到按钮上，您必须使用attr（）
方法，否则$（this）。数据（'increment'）
不会知道它。此外，您不必使用if语句进行事件处理，也不需要位于函数中<代码>

应该在末尾而不是开头有

。请参见下面的工作代码段：

var计数器=0；
函数计数（）{
$（'通知'）.addClass（“通知”）；
$（“#通知”）.html（计数器）；
}
$（“#重置”）。单击（函数（）{
$（'通知'）.removeClass（“通知”）；
$（“#通知”）.empty（）；
$（'.btn'）.attr（'data-increment'，'increment'）；
计数器=0；//我试图在此处重置计数器，但它不起作用
});
$（'body'）。在（'click'，'btn'，函数（e）上{
if（$（this）.attr（'data-increment'）=='increment'）{
计数器++；
}否则{
计数器--；
}
$（this.attr（'data-increment'，$（this.attr（'data-increment'）=='increment'？'decrement'：'increment'）；
计数（）；
});
。通知{
位置：绝对位置；
显示：块；
文本对齐：居中；
字体大小：9px；
字号：700；
字母间距：-1px；
宽度：自动；
最小宽度：8px；
高度：9px；
线高：4px；
填充物：5px；
边界半径：50%；
颜色：#fff；
盒影：1px 1px 5px#000；
边框：2倍实心#fff；
背景色：#b60000；
}

点击我
点击我
点击我
点击我




重置计数器
但这不会在第二次单击时减少我的计数器，就像我在mine@lonut，我不能向按钮添加数据增量=增量，因为只有在页面动态加载后才会填充按钮，这就是为什么它给我-1值，并且只有在我单击“重置”后才会添加数据增量，我编辑了你的答案，这样你就能明白我的意思了。那么，为什么不在页面加载/使用jQuery创建元素时添加这些数据属性呢？！这并不是说没有规则不添加它们。我刚刚给你举了一个很好的例子，剩下的我想你可以自己处理。这就是我要做的，我想你会知道一种不同的方法，而不是我那样做，但是谢谢你，这个帮助我尝试了这个方法，但它仍然保持了我以前的状态，并从停止的地方增加了值，我只想让一切从1开始